Dom 可拖动div

骑猪看日落 2022-06-11 00:00 378阅读 0赞 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5.     <title></title>
  7.     <script type="text/javascript"> var draggable = false; var offsetX = 0; var offsetY = 0; window.onload = function(){ var div01 = document.getElementById("div01"); div01.style.position="absolute"; div01.onmousedown = function () { draggable = true; offsetY = event.clientY - div01.offsetTop; offsetX = event.clientX - div01.offsetLeft; } div01.onmouseup = function () { draggable = false; } div01.onmousemove = function () { if(draggable){ this.style.left = event.clientX - offsetX + "px"; this.style.top = event.clientY - offsetY + "px"; } } div01.onmouseout = function () { draggable = false; } } </script>
  9. </head>
  10. <body>
  12. <div id="div01" style="width:300px; height:185px;background-color: lightgray"></div>
  14. </body>
  15. </html>

发表评论

表情：
评论列表 （有 0 条评论，378人围观）

还没有评论，来说两句吧...

相关阅读

    相关 html js设置div可拖动效果

    第一种：先看代码，可直接复制使用。 这部分是我找了个例子，看了一遍，自己写的。但是也有一些问题。 问题：js设置div可拖动效果  当我在实际项目中使用时，div里有关闭d

    灰太狼灰太狼/ 0 赞/ 771 阅读

    相关 js 鼠标拖动div

    div中心跟踪鼠标动而动 得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动 得到鼠标第一次坐标，移动时div

    忘是亡心i忘是亡心i/ 0 赞/ 608 阅读