拖拽效果

本人刚学JS，还很菜，在这里做了一个简单的拖拽效果，如图：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

废话就不多说了，直接上代码吧!

html代码就一句话

<div id="box" class="box"></div>

JS代码：

　　var oBox=document.getElementById('box');
　　var disX,disY;
　　oBox.onmousedown=function(ev){
　　　　var oEvent=ev||event;
　　　　disX=oEvent.clientX-oBox.offsetLeft;
　　　　disY=oEvent.clientY-oBox.offsetTop;

　　　　var oNewDiv=oBox.cloneNode(true);
　　　　oNewDiv.style.opacity=0.5;
　　　　oNewDiv.style.filter='alpha(opactiy:50)';
　　　　oNewDiv.style.left=oBox.offsetLeft+'px';
　　　　oNewDiv.style.top=oBox.offsetTop+'px';
　　　　document.body.appendChild(oNewDiv);

　　　　document.onmousemove=function(ev){
　　　　　　var oEvent=ev||event;
　　　　　　oNewDiv.style.left=oEvent.clientX-disX+'px';
　　　　　　oNewDiv.style.top=oEvent.clientY-disY+'px';

　　　　};

　　　　document.onmouseup=function(){
　　　　　　document.onmousemove=document.onmouseup=null;
　　　　　　oBox.style.left=oNewDiv.offsetLeft+'px';
　　　　　　oBox.style.top=oNewDiv.offsetTop+'px';
　　　　　　document.body.removeChild(oNewDiv);
　　　　　　oBox.releaseCapture && oBox.releaseCapture();

　　　　};
　　　　oBox.setCapture && oBox.setCapture();
　　　　return false;
　　}

　　

　我自己理解的拖拽的原理：

　　1，在鼠标按下的时候克隆一个新的div

　　2，按下鼠标的时候拖动克隆的div,主要是改变克隆div的left值 和top 值

　　3，在鼠标抬起的时候放下克隆的div，并且让之间的那个div的left值和top值与克隆的div的left 值和top值一致，就把之间的div拖到了这个位置，然后删除掉克隆的div

　　4，为了防止页面中有文字或者别的东西，需要阻止一下默认事件oBox.setCapture && oBox.setCapture();return false;

 

这个只是我自己的理解，理解还不是很深刻，如果有什么不对的地方，还请大家多指教！