jQuery EasyUI drag-and-drop - basic drag and drop

jQuery EasyUI Drag and Drop - Basic Drag and Drop

In jQuery EasyUI, you can implement the basic drag and placement of HTML elements.

This section will show you an example of how to make HTML elements draggable, in which we'll create three DIV elements and then enable their drag and drop.

First, let's create three elements:

	<div id="dd1" class="dd-demo"></div>
	<div id="dd2" class="dd-demo"></div>
	<div id="dd3" class="dd-demo"></div>

For the first element, we let it drag by default.

	$('#dd1').draggable();

For the second element, we let the proxy of the original element drag by creating a clone:

	$('#dd2').draggable({
		proxy:'clone'
	});

For the third element, we let it drag by creating a custom proxy:

	$('#dd3').draggable({
		proxy:function(source){
			var p = $('<div class="proxy">proxy</div>');
			p.appendTo('body');
			return p;
		}
	});

Download the jQuery EasyUI instance

jeasyui-dd-basic.zip