Script Drag and Drop dengan Javascript

Step 1: Sisipkan script berikut ini kedalam html kamu..

<style type="text/css"><br /><br />.drag{<br />position:relative;<br />cursor:hand;<br />z-index: 100;<br />}<br /><br /></style><br /><br /><script type="text/javascript"><br /><br />/***********************************************<br />* Drag and Drop Script: © Dynamic Drive (http://topjavascript.blogspot.com/)<br />* This notice MUST stay intact for legal use<br />* Visit http://topjavascript.blogspot.com/ for this script and 100s more.<br />***********************************************/<br /><br />var dragobject={<br />z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,<br />initialize:function(){<br />document.onmousedown=this.drag<br />document.onmouseup=function(){this.dragapproved=0}<br />},<br />drag:function(e){<br />var evtobj=window.event? window.event : e<br />this.targetobj=window.event? event.srcElement : e.target<br />if (this.targetobj.className=="drag"){<br />this.dragapproved=1<br />if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}<br />if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}<br />this.offsetx=parseInt(this.targetobj.style.left)<br />this.offsety=parseInt(this.targetobj.style.top)<br />this.x=evtobj.clientX<br />this.y=evtobj.clientY<br />if (evtobj.preventDefault)<br />evtobj.preventDefault()<br />document.onmousemove=dragobject.moveit<br />}<br />},<br />moveit:function(e){<br />var evtobj=window.event? window.event : e<br />if (this.dragapproved==1){<br />this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"<br />this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"<br />return false<br />}<br />}<br />}<br /><br />dragobject.initialize()<br /><br /></script>