Choosing a Javascript MVC framework for a drag and drop interface

Question

USECASE: I am starting with a project which involves a lot of client side scripting. It is similar to a mini CMS where user can drag and drop html components. Somewhat similar to this. Now I am in a situation where I have to choose a MVC framework for defining the components that the user will be working on. (performing operations like drag, resize, delete etc).

Now the problem I am facing is,in choosing a framework which would be easy to learn and implement. I have the basic knowledge of Javascript and jQuery and have been using it for some time,but no experience with MVC.

My research from past 2 days says backbone.js is good to start,but I would like comments/suggestions over the flexibility it gives on handling html components and DOM elements. How can I store the initial content of the HTML components? (Outer boxes and structure).

Also, how can I handle multiple components of same type? Generating Id's dynamically is an option, but it becomes difficult to manage multiple elements with dynamic ids. Is there any other way they can be handled?

Which framework would it be easy to handle events on these components?

Answer 1

i use backbone for a web app which involves dragging and dropping, and i use jquery ui to implement the drag and drop features. They integrate pretty well imo, when you want to implement a droppable backbone view, for example

render: function(){
    var $el = this.$el,
        over = false,
        origWidth;


       if (!this.$el.is('.ui-sortable'))
            this.$el.sortable({
                revert: false,
                axis: 'y',
                placeholder: 'placeholder',
                items: '.load-order',
                containment: this.el,
                receive: this.onOrderDrop,
                over: this.onOrderOver
                out: function(e, ui){
                    // Resize back to original width
                    if (over && ui.helper)
                        ui.helper.stop().animate({width: origWidth}, 'fast');
                    over = false;
                }

update:

with backbone views, you have a skeleton html structure which is then incremented with backbone views. Each view has a template which is rendered with model data you can read more about it at Backbone Essentials

also i made a small todolist to demonstrate draggable event with backbone
http://www.github.com/joaoxsouls/todolist

Answer 2

Why do you want to use BackboneJS?

If its not a necessity, and you simply want a drag drop interface, you might want to look at this: http://omshankar.kodingen.com/engine-1.73/
The JavaScript has been minimised only to make it single line. Functions and variables are all intact, which in Chrome can be seen by clicking on {} in Sources

If its an extreme necessity, you can definitely have drag drop in backbone. Only thing is that you might have to initialize a drag drop again in the item's render function, every time its called.
Regarding having an HTML structure, outer box and components, make your HTML the way you want. It can be done. A sample Backbone application: http://omshankar.kodingen.com/exp/backbone-html5-dd/

It also has a drag-drop, but that's dragging image files from your OS into browser, not of your relevance

If you want to store HTML, you can do via local storage, or have that simply in your HTML file. Apply/Make Backbone view only to those parts that are dynamic