拖拽DIV最少代码

weixin_30613727

于 2011-02-18 14:48:00 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nalanken/archive/2011/02/18/1957830.html

本文介绍了一种使用纯JavaScript实现的简单拖拽效果方法。通过给指定元素添加鼠标按下事件监听，计算鼠标位置与元素位置的关系，进而实现元素跟随鼠标移动的效果。此方法适用于简单的网页布局调整或互动组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<title></title>
  <script type="text/javascript">
        function Drag(obj)
        {
            var obj = document.getElementById(obj);
            obj.style.position = "absolute";
            obj.onmousedown = function(e)
            {
                e = e || window.event;
                var x = e.offsetX;
                var y = e.offsetY;
                document.onmousemove = function(e)
                {
                    e = e || window.event;
                    obj.style.left = (e.clientX - x) + "px";
                    obj.style.top = (e.clientY - y) + "px";
                }
                document.onmouseup = function()
                {
                    document.onmousemove = null;
                    obj.onmousedown = null;
                }
            }
        }
    </script>
</head>
<body>
    <div id="div"  style="background-color:White;width:300px;height:250px;">
     <div id="p" style="cursor:move;background-color:Red;width:300px;height:25px;" onmousedown="Drag('div')">        
     </div>
     <div>
     正文  
     </div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/nalanken/archive/2011/02/18/1957830.html