Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Draggable and dropable views for backbone, uses html5 drag and drop api, requires jquery and underscore, not tested in IE yet
return View.extend({
initialize: function () {
this.el.attr("draggable", "true")
this.el.bind("dragstart", _.bind(this._dragStartEvent, this))
},
_dragStartEvent: function (e) {
var data
if (e.originalEvent) e = e.originalEvent
e.dataTransfer.effectAllowed = "copy" // default to copy
data = this.dragStart(e.dataTransfer, e)
window._backboneDragDropObject = null
if (data !== undefined) {
window._backboneDragDropObject = data // we cant bind an object directly because it has to be a string, json just won't do
}
},
dragStart: function (dataTransfer, e) {} // override me, return data to be bound to drag
})
return View.extend({
initialize: function () {
this.el.bind("dragover", _.bind(this._dragOverEvent, this))
this.el.bind("dragenter", _.bind(this._dragEnterEvent, this))
this.el.bind("dragleave", _.bind(this._dragLeaveEvent, this))
this.el.bind("drop", _.bind(this._dropEvent, this))
this._draghoverClassAdded = false
},
_dragOverEvent: function (e) {
if (e.originalEvent) e = e.originalEvent
var data = this._getCurrentDragData(e)
if (this.dragOver(data, e.dataTransfer, e) !== false) {
if (e.preventDefault) e.preventDefault()
e.dataTransfer.dropEffect = 'copy' // default
}
},
_dragEnterEvent: function (e) {
if (e.originalEvent) e = e.originalEvent
if (e.preventDefault) e.preventDefault()
},
_dragLeaveEvent: function (e) {
if (e.originalEvent) e = e.originalEvent
var data = this._getCurrentDragData(e)
this.dragLeave(data, e.dataTransfer, e)
},
_dropEvent: function (e) {
if (e.originalEvent) e = e.originalEvent
var data = this._getCurrentDragData(e)
if (e.preventDefault) e.preventDefault()
if (e.stopPropagation) e.stopPropagation() // stops the browser from redirecting
if (this._draghoverClassAdded) this.el.removeClass("draghover")
this.drop(data, e.dataTransfer, e)
},
_getCurrentDragData: function (e) {
var data = null
if (window._backboneDragDropObject) data = window._backboneDragDropObject
return data
},
dragOver: function (data, dataTransfer, e) { // optionally override me and set dataTransfer.dropEffect, return false if the data is not droppable
this.el.addClass("draghover")
this._draghoverClassAdded = true
},
dragLeave: function (data, dataTransfer, e) { // optionally override me
if (this._draghoverClassAdded) this.el.removeClass("draghover")
},
drop: function (data, dataTransfer, e) {} // overide me! if the draggable class returned some data on 'dragStart' it will be the first argument
})
@manju439

This comment has been minimized.

Copy link

@manju439 manju439 commented Apr 12, 2013

Hi, I am new to BackBone.js,I want Drag and Drop option in my application using BackBone.js.I want to know Exactly how to use your Draggable .js and Droppable .js.Please help me out.

Thanks in Advance......................!

@rady1995

This comment has been minimized.

Copy link

@rady1995 rady1995 commented Mar 22, 2016

Hi, I am new learner in IT , so I need all of you to give me about advice in code please!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.