jquery 拖动

jQuery 拖动实现方法

使用 jQuery UI 的 Draggable 组件

jQuery UI 提供了 Draggable 组件，可以轻松实现元素的拖动功能。需要先引入 jQuery 和 jQuery UI 库。

<!-- 引入 jQuery 和 jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- HTML 元素 -->
<div id="draggable">拖动我</div>

<!-- JavaScript 代码 -->
<script>
  $(function() {
    $("#draggable").draggable();
  });
</script>

自定义拖动事件

如果不使用 jQuery UI，可以通过监听鼠标事件实现自定义拖动功能。

<div id="draggable" style="width: 100px; height: 100px; background: #ccc;">拖动我</div>

<script>
  $(function() {
    var isDragging = false;
    var offset = { x: 0, y: 0 };

    $("#draggable").mousedown(function(e) {
      isDragging = true;
      offset.x = e.clientX - $(this).offset().left;
      offset.y = e.clientY - $(this).offset().top;
    });

    $(document).mousemove(function(e) {
      if (!isDragging) return;
      $("#draggable").css({
        left: e.clientX - offset.x,
        top: e.clientY - offset.y,
        position: "absolute"
      });
    });

    $(document).mouseup(function() {
      isDragging = false;
    });
  });
</script>

限制拖动范围

可以通过设置 containment 参数限制拖动范围。

$("#draggable").draggable({
  containment: "parent" // 限制在父元素内拖动
});

拖动回调函数

jQuery UI Draggable 提供了多个事件回调，如 start、drag 和 stop。

$("#draggable").draggable({
  start: function() {
    console.log("拖动开始");
  },
  drag: function() {
    console.log("拖动中");
  },
  stop: function() {
    console.log("拖动结束");
  }
});

拖动辅助元素

可以通过 helper 选项设置拖动时显示的辅助元素。

$("#draggable").draggable({
  helper: "clone" // 拖动时显示克隆元素
});

注意事项

• 使用 jQuery UI 时需确保正确引入库文件。
• 自定义拖动时注意性能优化，避免频繁的 DOM 操作。
• 移动端需要额外处理触摸事件（如 touchstart、touchmove）。