js实现鼠标拖拽移动元素位置

最新推荐文章于 2024-08-12 14:11:38 发布

qq_39305143

最新推荐文章于 2024-08-12 14:11:38 发布

阅读量4.6k

点赞数 2

分类专栏： js 文章标签： js实现拖拽移动位置

本文链接：https://blog.csdn.net/qq_39305143/article/details/90379777

版权

本文介绍如何通过JavaScript实现鼠标拖拽功能，允许用户直接通过鼠标移动页面上的元素，详细讲解了相关代码实现步骤。

摘要由CSDN通过智能技术生成

js实现鼠标拖拽移动元素位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽移动位置</title>
    <style type="text/css">
        #box1{
            width:100px;
            height:100px;
            background-color: #00b0e0;
        }

    </style>
</head>
<body>
    <div id="box1" style="position: absolute;top:20px;left:30px;"></div>
    <script type="text/javascript">
        /*1.获取到要移动的元素，触发鼠标按下事件，
          2.鼠标移动时，让元素跟着鼠标移动
           3.当鼠标抬起时停止到该位置
        */
        var box1 = document.getElementById("box1");
        console.log("box1的位置为："+ box1.style.left+ ","+ box1.style.top);

        box1.onmousedown = function(){
            /*为document绑定一个onmousemove事件
             为什么要为document绑定事件而不是box1绑定呢？