How to Drag and Drop in JavaScript and jquery

<a href="http://www.webreference.com/programming/javascript/mk/column2/">http://www.webreference.com/programming/javascript/mk/column2/</a>
<a href="http://batiste.dosimple.ch/blog/posts/2008-05-18-1/jquery-drag-and-drop-and-resize-event-delegation.html">http://batiste.dosimple.ch/blog/posts/2008-05-18-1/jquery-drag-and-drop-and-resize-event-delegation.html</a>

<a href="http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/">http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/</a>


Jquery

http://thechriswalker.net/select-drag/

<script language="javascript" type="text/javascript">
$(document).ready(function(){ $(".block").draggable({helper:'clone'});
$(".drop").droppable({ accept: ".block", activeClass: 'droppable-active', hoverClass: 'droppable-hover', drop: function(ev, ui) { document.getElementById("display").innerHTML = $(ui.draggable).children("li:first").text();
var lid = ($(ui.draggable).children("li:first"));
var removeLink = document.createElement("a");
removeLink.innerHTML = "remove";
removeLink.href = "#"; removeLink.onclick = function() { $("#drop1").children().remove("#"+lid[0].id);
$(this).remove(); }
$(this).append($(ui.draggable).clone().children("li:first").addClass("blocker"));
$(this).append(removeLink); }}); });
</script>

And here is the HTML:

<?xml:namespace prefix = asp /><asp:datalist id="dlRooms" repeatdirection="Horizontal" repeatcolumns="3" runat="server"><p><%# Eval("tblRoom.Description") %></p></itemtemplate></asp:datalist>