Draggable and dropable views for backbone, uses html5 drag and drop api, requires jquery and underscore, not tested in IE yet

Draggable.js

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
})

Dropable.js

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
})

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......................!

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