Event Delegated Drag and Drop Examples

Normal Operation

$(".draggable").draggable();
$(".droptarget").droppable();
Drag Me!
Drop Here

Custom Drag Helper

$(".draggable").draggable({
	helper: function() {
		return $(this).clone().css({
			background: "blue",
			color: "white"
		});
	}
});
$(".droptarget").droppable();
Drag Me!
Drop Here

Dragging Distance

$(".draggable").draggable({
	distance: 15
});
$(".droptarget").droppable();
Drag Me!
Drop Here

Custom Cursor Position

$(".draggable").draggable({
	cursorAt: { left: 20, top: 20 }
});
$(".droptarget").droppable();
Drag Me!
Drop Here

Drop Target Accept

$(".draggable").draggable();
$(".droptarget").droppable({
	accept: "#coolElement"
});
Drag Me!
I'm a cool element!
Drop Cool Elements Here

Custom Drop Function

$(".draggable").draggable();
$(".droptarget").droppable({
	drop: function() {
		$(this).html("Dropped!").css({
			background: "yellow",
			color: "black"
		});
	}
});
Drag Me!
Drop Here