jEasyUI basic drag and drop


This tutorial shows you how to make HTML elements draggable, in this case we will create three DIV elements and then enable their dragging and placement.

19.png

First, we create three <div> 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 <div> element, we make it draggable by default. 

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

For the second <div> element, we make it draggable by creating a proxy that clones the original element. 

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

For the third <div> element, we make it draggable by creating a custom proxy. 

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

Download jQuery EasyUI instance

jeasyui-dd-basic.zip