DD.js

$JSKK.Class.create
(
	{
		$namespace: 'app',
		$name:		'DD',
		$uses:
		[
			'$JSKK.trait.Configurable',
			'$JSKK.trait.Observable'
		]
	}
)
(
	{},
	{
		config:
		{
			copy:	true,
			move:	false
		},
		events:
		{
			onDragStart:	true,
			onDragEnd:		true,
			onDragEnter:	true,
			onDragOver:		true,
			onDragLeave:	true,
			onDrop:			true
		},
		draggables: null,
		droppables: null,
		init: function(draggables,droppables)
		{
			if (!Object.isArray(draggables))
			{
				if (draggables instanceof jQuery)
				{
					draggables=draggables.toArray();
				}
				else
				{
					draggables=[draggables];
				}
			}
			if (!Object.isArray(droppables))
			{
				if (droppables instanceof jQuery)
				{
					droppables=droppables.toArray();
				}
				else
				{
					droppables=[droppables];
				}
			}
			
			this.draggables=draggables;
			this.droppables=droppables;
			
			this.bindEvents();
		},
		bindEvents: function()
		{
			for (var i=0,j=this.draggables.length; i<j; i++)
			{
				this.draggables[i].addEventListener('dragstart',this.onDragStart.bind(this),false);
				this.draggables[i].addEventListener('dragend',	this.onDragEnd.bind(this),false);
			}
			for (var i=0,j=this.droppables.length; i<j; i++)
			{
				this.droppables[i].addEventListener('dragenter',this.onDragEnter.bind(this),false);
				this.droppables[i].addEventListener('dragover',	this.onDragOver.bind(this),false);
				this.droppables[i].addEventListener('dragleave',this.onDragLeave.bind(this),false);
				this.droppables[i].addEventListener('drop',		this.onDrop.bind(this),false);
			}
		},
		onDragStart: function(e)
		{
			var dragEl=$(e.target);
			this.draggingEl=dragEl;
			
			if (this.fireEvent('onDragStart',this,dragEl,e)!==false)
			{
				if (this.config.copy && this.config.move)
				{
					e.dataTransfer.effectAllowed='copyMove';
				}
				else if (this.config.copy)
				{
					e.dataTransfer.effectAllowed='copy';
				}
				else if (this.config.move)
				{
					e.dataTransfer.effectAllowed='move';
				}
				else
				{
					e.dataTransfer.effectAllowed='all';
				}
				e.dataTransfer.setData('text/html',dragEl.parent().html());
			}
			else
			{
				e.preventDefault();
			}
		},
		onDragEnd: function(e)
		{
			this.fireEvent('onDragEnd',this,$(e.target),e);
		},
		onDragEnter: function(e)
		{
			this.fireEvent('onDragEnter',this,$(e.target),e);
		},
		onDragOver: function(e)
		{
			e.preventDefault();
		},
		onDragLeave: function(e)
		{
			this.fireEvent('onDragLeave',this,$(e.target),e);
		},
		onDrop: function(e)
		{
			e.stopPropagation();
			e.preventDefault();
			
			var	newEl=$(e.dataTransfer.getData('text/html'));
			this.fireEvent('onDrop',this,newEl,$(e.target),e);
		}
	}
);