主题：【原创】纯技术讨论：网页中图片拖曳的简单实现 -- 铁手
目标：
用鼠标左键来 拖曳(drag & drop) 网页中的图片到任何地方。
基本思路：
设定 document 的 onmousedown, onmouseup。
1、左键按下不放开，选中图片。
zJ_StartDrag: 设定 document 的 mousemove，获得鼠标的屏幕坐标，用来供移动鼠标时候计算相对移动量。
2、鼠标按住，继续拖动。
在 document.onmousemove 中更新被拖动图片的位置，并且获得新的鼠标位置。
3、鼠标放开，移动结束。
以下为代码供参考
<html>
<head>
<style>
.D_Drag{position:relative;cursor:pointer}
</style>
<script type="text/javascript">
var zd_Flag=false;
var zd_D;
var zd_LastX=0;
var zd_LastY=0;
function zJ_DragIt(zE){
if(zd_Flag){
if(!zE){zE=window.event}
zd_D.style.left=(parseInt(zd_D.style.left+0)+zE.screenX-zd_LastX)+"px";
zd_D.style.top=(parseInt(zd_D.style.top+0)+zE.screenY-zd_LastY)+"px";
zd_LastY=zE.screenY; zd_LastX=zE.screenX;
return false;
}
}
function zJ_StargDrag(zE){
if(!zE){zE=window.event}
zd_D=zE.target?zE.target:zE.srcElement;
if(zd_D.className=="D_Drag"){
zd_LastX=zE.screenX; zd_LastY=zE.screenY;
zd_Flag = true;
document.onmousemove=zJ_DragIt;
return false;
}
}
function zJ_StopDrag(){
zd_Flag=false;
}
document.onmousedown=zJ_StargDrag;
document.onmouseup=zJ_StopDrag;
</script>
</head>
<body>
<div style="border:3px solid green;width:500px;height:300px;margin:auto">
<img src="qt.gif" class="D_Drag">
<img src="qt.gif" class="D_Drag">
<img src="qt.gif" class="D_Drag">
</div>
</body>
</html>
- 相关回复 上下关系8
🙂【原创】纯技术讨论：网页中图片拖曳的简单实现
🙂Opera中测试正常 qiutian 字0 2009-07-31 03:57:18
🙂chrome测试基本正常。问题是 素里太守 字100 2009-07-31 03:15:33
🙂嗯，铁老大，刚才测试了一下 2 陶醉 字127 2009-07-30 22:38:11
🙂多谢，看来为保险起见，应该加一个判断语句。我修改一下 铁手 字0 2009-07-30 22:42:11
🙂噢，不用，不过手头上就没其他浏览器了，估计这样也行了吧 陶醉 字0 2009-07-30 22:50:48
🙂把老铁的宝发给老铁 蝶舞春园 字142 2009-07-30 21:24:36
🙂消灭零回复 前世不修 字36 2009-07-30 06:06:51