可拖动的层-CSDN博客

本文链接：https://blog.csdn.net/yzbczq/article/details/83337306

<html>
<head>
<title>可拖拽的元素</title>
<script language="javascript">
/*
第一个参数是要移动的元素
第二个参数是触发对象,(鼠标)
*/
function begin(drag,event)
{
 //要移动元素左上角的坐标
 var x=parseInt(drag.style.left);
 var y=parseInt(drag.style.top);
 //计算鼠标与元素之间的距离
 var delx=event.clientX-parseInt(drag.style.left);
 var dely=event.clientY-parseInt(drag.style.top);
// 鼠标按钮保持按下的状态时,这些事件处理程序保持活动的状态
 document.attachEvent("onmousemove",moveHandle);
// 在按钮被释放时,他们被删除
 document.attachEvent("onmouseup",upHandle);
// 让该事件不起泡(还有俩个说法:1.不向上传递事件;2.让该事件对其他标记不可见)
 event.cancelBubble=true;
// 返回值为0; 其实我不太懂这句有什么意义...- -
 event.returnValue=false; 
 /*
 捕捉mousemove事件的~处理程序~
 */
 function moveHandle(e)
 {
  e=window.event;
  drag.style.left=(event.clientX-delx)+"px";
  drag.style.top=(event.clientY-dely)+"px";
  // 不起泡
  event.cancelBubble=true;
 }
 /*
 捕捉松开按钮时发生的mouseup事件
 */
 function upHandle(e)
 {
   //注销事件
   //不懂为什么第一个注销up事件,难道是最后完成的要最先注销?
   document.detachEvent("onmouseup",upHandle);
   document.detachEvent("onmousemove",moveHandle);
 }
 //再次不起泡
  event.cancelBubble=true;
}
</script>
</head>

<!--第一个例子-->
<body>
<!--样式里:left和top设定起始位置.position必须为absolute-->
<div style="left:0px;top:0px; position:absolute" onmousedown="begin(this,event)">你可以拖我...但是不要抛弃我.0 0..</div>

<!--第二个例子-->
<div style="position:absolute; left:50px;top:50px; border-style:dashed; border-width:thin; width: 246px; height: 117px;" >
<div style="position:absolute; left:5px; top:0px;width: 232px; background-color:pink"onMouseDown="begin(this.parentNode,event)">与老婆约法三章</div>
<div style="position:absolute; left:px; top:18px;">
<ul>
<li>第一.你要爱我</li>
<li>第二.我说的话永远都是对的.</li>
<li>第三.如果我说错了.请参照第二条</li>
</ul>
</div>
</div>

</body>
</html>