首页 > 代码库 > 拖拽效果
拖拽效果
本人刚学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;
这个只是我自己的理解，理解还不是很深刻，如果有什么不对的地方，还请大家多指教！
拖拽效果