Choosing a javascript MVC framework for a drag and drop interface

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 becoms difficult to manage multiple elements with dynamic ids.Is der any other way they can be handled?
Which framework would it be easy to handle events on these components?

Thanks for the time

  • “Cannot read property 'appendChild' of null” with Disqus on Backbone website
  • Backbone Model Fetch() is adding extra parameters to url
  • why use javascript routing?
  • Require.js Templates “Cross origin requests are only supported for HTTP” Error
  • Best(?) practice for loading & saving relational data in Polymer
  • Does anyone have experience using Backbone.js and Pylons/Pyramid ? any sample to look at?
  • Extending React.js components
  • Unable to get Backbone.js route handlers to fire on matching route
  • Best way to load modules in my view using backbone?
  • Backbone.js model.destroy() not sending DELETE request
  • Dynamically generate site navigation from JSON with Backbone.Marionette
  • Filtering a Backbone Collection returns an array of Models
  • 4 Solutions collect form web for “Choosing a javascript MVC framework for a drag and drop interface”

    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

    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

    I suggest Angular JS? It has great binding and directive features.

    AngularJS is great, especially if you couple it with something like ConversationJS:

    https://github.com/rhyneandrew/Conversation.JS

    I’m not a big fan of how “spaghetti” angular feels, and Conversation allows you to decouple quite a bit of it without changing the way it works. It makes the code base quite a bit cleaner.