- 发帖可能变空内容，邪门暂不知所以然
- 『稷下学宫』新认证方式，24年网站打算和努力目标
主题：【原创】纯技术讨论：网页中图片拖曳的简单实现 -- 铁手
目标：
用鼠标左键来 拖曳(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>
有人看没人回？
我来回一个
学习学习
鲜花已经成功送出。
此次送花为【有效送花赞扬，涨乐善、声望】
在firefox下没问题，代码正常。
但是在ie下事件响应函数参数zE传递有问题，
试了下，需要直接用window.event这个全局的量来代替zE才行。
这个拖动有个边界问题。往上往左可以移动“出”窗口，往上往下可以改变窗口的尺寸，即滚动条出现或者消失。