Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A consistent drag and drop across browsers using native like events. Read more about it on:

Note : Does not work on IE8 er below. It is a jQuery plugin so it requires jQuery, which also Backbone does... so... thought I should mention it nevertheless :-)

        tagName: 'div',
        className: 'dragdrop',
        events: {
            //Handle drag
            'mousedown .draggable': 'detectDrag',
            'dragstart .draggable': 'dragstart',
            'dragend .draggable': 'dragend',
            // Handle drop
            'dragenter .dropable': 'dragenter',
            'dragleave .dropable': 'dragleave',
            'drop .dropable': 'drop'
        detectDrag: function (event) {
            // Trigger detectDrag on the mousedowned element
        dragstart: function (event, data, clone, element) {
            // Add any properties to the data object
            // to pass it to the drop. You can also 
            // manipulate the clone created that follows the 
            // mouse pointer and the element that started 
            // the drag
            data.someProperty = 'someValue';
            // Or set the value of data
        dragenter: function (event, clone, element) {
          // When you drag something and hover the drop container.
          // Do something to the dropcontainer, the element where the
          // drag started or the clone following the cursor
          var dropContainer = $(event.currentTarget);
          dropContainer.animate({opacity: 1}, 'fast');
        dragleave: function (event, clone, element) {
          // Typically revert changes on dragenter
          var dropContainer = $(event.currentTarget);
          dropContainer.animate({opacity: 0.5}, 'fast');
        drop: function (event, data, clone, element) {
          // Trigger code on drop
          console.log(data.someProperty); // => someValue
          // Or if data was set()
          console.log(data); // => someValue
        dragend: function (event, clone, element) {
           // Triggered when NOT dropping into a drop container.
           // Either the drop or the dragend event is triggered


A consistent drag and drop across browsers using native like events



No releases published
You can’t perform that action at this time.