JavaScript实现拖拽

JavaScript实现拖拽

使用mousedown, mousemove, mouseup事件

mousedown事件触发后,开始拖拽

mousemove时,需要通过event.clientX和clientY获取拖拽位置,并实时更新位置

mouseup时,拖拽结束

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Draggable Element</title>
  <style>
    .draggable {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: #f00;
      cursor: move;
    }
  </style>
</head>
<body>
  <div id="draggable" class="draggable"></div>

  <script>
    // 获取需要拖拽的节点
    var draggableNode = document.getElementById('draggable');

    // 初始化拖拽状态
    var isDragging = false;
    var offset = { x: 0, y: 0 };

    // 绑定 mousedown 事件
    draggableNode.addEventListener("mousedown", function(event) {
      // 设置拖拽状态为 true
      isDragging = true;

      // 计算鼠标相对于节点的偏移量
      offset.x = event.clientX - draggableNode.offsetLeft;
      offset.y = event.clientY - draggableNode.offsetTop;
    });

    // 绑定 mousemove 事件
    draggableNode.addEventListener("mousemove", function(event) {
      // 如果处于拖拽状态
      if (isDragging) {
        // 计算节点的新位置
        var left = event.clientX - offset.x;
        var top = event.clientY - offset.y;

        // 更新节点的位置
        draggableNode.style.left = left + "px";
        draggableNode.style.top = top + "px";
      }
    });

    // 绑定 mouseup 事件
    draggableNode.addEventListener("mouseup", function() {
      // 设置拖拽状态为 false
      isDragging = false;
    });
  </script>
</body>
</html>

通过上述代码可以实现一个简单的拖拽功能,复制可用。

相关推荐
potato_may22 分钟前
C语言第3讲:分支和循环(上)—— 程序的“决策”与“重复”之旅
c语言·开发语言
铅笔侠_小龙虾28 分钟前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
kalvin_y_liu35 分钟前
【MES架构师与C#高级工程师(设备控制方向)两大职业路径的技术】
开发语言·职场和发展·c#·mes
xxxxxxllllllshi39 分钟前
Java 代理模式深度解析:从静态到动态,从原理到实战
java·开发语言·笔记·算法·代理模式
计算机毕业设计指导1 小时前
从零开始构建HIDS主机入侵检测系统:Python Flask全栈开发实战
开发语言·python·flask
步行cgn1 小时前
SqlSessionFactory 的作用
java·开发语言
数据知道1 小时前
Go语言:Go 语言中的命令行参数操作详解
开发语言·后端·golang·go语言
hui函数2 小时前
Python全栈(基础篇)——Day05:后端内容(dict与set+while循环+for循环+实战演示+每日一题)
开发语言·后端·python
小猪绝不放弃.2 小时前
一张图入门 Docker
java·开发语言
可可南木2 小时前
ICT 数字测试原理 8 - -VCL 的测试参数
开发语言·功能测试·测试工具·pcb工艺