主题：【原创】纯技术讨论：网页中图片拖曳的简单实现 -- 铁手
家园 【原创】纯技术讨论：网页中图片拖曳的简单实现 目标：
用鼠标左键来 拖曳(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>
