Phiên bản đầy đủ: jsB@nk » Ứng dụng » Kéo/thả các đối tượng
URL: https://www.javascriptbank.com/generic-dragging-script.html
Hiệu ứng cung cấp khả năng kéo thả các đối tượng khác nhau trên trang web như hình ảnh, văn bản...
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Kéo/thả các đối tượng
URL: https://www.javascriptbank.com/generic-dragging-script.html
<script title="javascript" title="drag.js">var dO=new Object();dO.snapthresh=20; // THIS VALUE IS THE SNAPTO INCREMENT.dO.snapto=true; // SET TO true TO ENABLE SNAPTO, false TO DISABLE IT.dO.currID=null;dO.z=0;dO.xo=0;dO.yo=0;dO.ns4=(document.layers)?true:false;dO.ns6=(document.getElementById&&!document.all)?true:false;dO.ie4=(document.all&&!document.getElementById)?true:false;dO.ie5=(document.all&&document.getElementById)?true:false;dO.w3c=(document.getElementById)?true:false;function invsnap(){dO.snapto=!dO.snapto;}//NEAT FUNCTION BY MIKE HALL (OF BRAINJAR.COM) THAT FINDS NESTED LAYERS FOR NS4.xfunction findnestedlayer(name,doc){var i,layer;for(i=0;i<doc.layers.length;i++){layer=doc.layers[i];if(layer.name==name)return layer;if(layer.document.layers.length>0)if((layer=findlayer(name,layer.document))!=null)return layer;}return null;}function trckM(e){if(dO.currID!=null){var x=(dO.ie4||dO.ie5)?event.clientX+document.body.scrollLeft:e.pageX;var y=(dO.ie4||dO.ie5)?event.clientY+document.body.scrollTop:e.pageY;if(dO.snapto){x=Math.ceil(x/dO.snapthresh)*dO.snapthresh;y=Math.ceil(y/dO.snapthresh)*dO.snapthresh;}if(dO.ns4)dO.currID.moveTo(x-dO.xo, y-dO.yo);else{dO.currID.style.top=y-dO.yo+'px';dO.currID.style.left=x-dO.xo+'px'; }}return false;}function drgI(e){if(dO.currID==null){var tx=(dO.ns4)? this.left : parseInt(this.style.left);var ty=(dO.ns4)? this.top : parseInt(this.style.top);dO.currID=this;if(dO.ns4)this.zIndex=document.images.length+(dO.z++);else this.style.zIndex=document.images.length+(dO.z++);dO.xo=((dO.ie4||dO.ie5)?event.clientX+document.body.scrollLeft:e.pageX)-tx;dO.yo=((dO.ie4||dO.ie5)?event.clientY+document.body.scrollTop:e.pageY)-ty;if(dO.snapto){dO.xo=Math.ceil(dO.xo/dO.snapthresh)*dO.snapthresh;dO.yo=Math.ceil(dO.yo/dO.snapthresh)*dO.snapthresh;}return false;}}function dragElement(id){this.idRef=(dO.ns4)? findnestedlayer(id,document) : (dO.ie4)? document.all[id] : document.getElementById(id);if(dO.ns4)this.idRef.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);this.idRef.onmousedown=drgI;this.idRef.onmouseup=function(){dO.currID=null}}if(dO.ns4)document.captureEvents(Event.MOUSEMOVE);document.onmousemove=trckM;window.onresize=function(){if(dO.ns4)setTimeout('history.go(0)',300);}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="i2" style="cursor:default; position:absolute; top:60px; left:10px; width:200px; height:120px; background-color:#00385c; layer-background-color:#00385c;"><table width="200" height="120" border="1" cellpadding="5"><tr><td valign="top"><font size=2 color=white>This is just a simple script that makes any HTML element draggable, even this message.<br><br>Try it with these other images too.</font></td></tr></table></div><div id="i3" style="position:absolute; top:170px; left:250px; width:90px; height:30px;"><img src="../image/logojs.gif" width="90" height="30"></div><div id="i4" style="position:absolute; top:150px; left:350px; width:88px; height:31px;"><img src="../image/logojs.gif" width="88" height="31"></div><script language="javascript">new dragElement('i2');new dragElement('i3');new dragElement('i4');</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->