A consistent drag and drop across browsers using native like events. Read more about it on: http://christianalfoni.com/2013/09/09/delegated-drag-and-drop-for-backbone/
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 :-)
Backbone.View.extend({
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
$(event.currentTarget).detectDrag();
},
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
data.set('someValue');
},
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
},
});