JS 拖拽

最新推荐文章于 2025-03-13 00:57:17 发布

huyao_road

最新推荐文章于 2025-03-13 00:57:17 发布

阅读量704

点赞数 1

分类专栏： JS小技巧

本文链接：https://blog.csdn.net/qq_37746973/article/details/80748879

版权

JS小技巧专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种通过监听鼠标事件实现元素拖拽的方法。利用mousedown、mousemove和mouseup事件，可以轻松地让页面中的元素随鼠标移动。代码示例中详细展示了如何绑定这些事件并更新元素的位置。

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

实现后效果

实现原理：

在允许拖拽的节点元素上，监听mousedown(按下鼠标按钮)事件，鼠标按下后，事件触发
监听mousemove(鼠标移动)事件，修改克隆出来的节点的坐标，实现节点跟随鼠标的效果
监听mouseup(放开鼠标按钮)事件，将原节点克隆到鼠标放下位置的容器里，将绑定的mousemove和mouseup事件清除掉，拖拽完成。

拖拽方法实现

//鼠标拖拽方法
function drag(e) {

    var event = e || window.event;  //事件兼容
    var disX = event.clientX - this.offsetLeft, //当前鼠标在区块上的横向相对位置
        disY = event.clientY - this.offsetTop;  //当前鼠标在区块上的纵向相对位置
    var that = this;
    //鼠标移动
    document.onmousemove = function (e) {

        var newLeft = e.clientX - disX,
            newTop = e.clientY - disY;
        that.style.left = newLeft + 'px';
        that.style.top = newTop + 'px';
    }
    //鼠标键弹起
    document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

HTML部分

<!DOCTYPE html>
<html>
<head>
	<title>模拟重力场运动（碰撞检测&拖拽）</title>
    <style>
    div{
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background-color: orange;
        border-radius: 50%;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <div></div>

<script type="text/javascript">

var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmousedown = drag;    //拖拽事件绑定

</script>
</body>
</html>