当前位置：首页 > jquery

jquery拖拽

2026-03-02 14:56:08jquery

jQuery 拖拽实现方法

使用 jQuery 实现拖拽功能可以通过原生 HTML5 的拖放 API 或借助 jQuery UI 库。以下是两种常见方法：

方法一：使用 jQuery UI 的 `draggable()`

jQuery UI 提供了简单的拖拽接口，适合快速实现基础功能。

// 引入 jQuery 和 jQuery UI 库后
$(function() {
  $("#draggable-element").draggable({
    cursor: "move",      // 拖拽时鼠标样式
    containment: "parent", // 限制在父元素内拖拽
    revert: "invalid"    // 无效放置时返回原位置
  });
});

关键参数：

containment: 限制拖拽范围（如 "parent" 或 [x1, y1, x2, y2]）。
axis: 限制拖拽方向（如 "x" 或 "y"）。
grid: 拖拽对齐网格（如 [50, 50]）。

方法二：HTML5 原生拖放 API + jQuery

通过监听原生拖放事件实现更自定义的拖拽逻辑。

$(function() {
  const $draggable = $("#draggable-element");

  // 设置元素为可拖拽
  $draggable.attr("draggable", "true");

  // 拖拽开始事件
  $draggable.on("dragstart", function(e) {
    e.originalEvent.dataTransfer.setData("text/plain", $(this).attr("id"));
  });

  // 放置目标区域事件
  $("#drop-area")
    .on("dragover", function(e) {
      e.preventDefault(); // 允许放置
    })
    .on("drop", function(e) {
      e.preventDefault();
      const id = e.originalEvent.dataTransfer.getData("text/plain");
      $(`#${id}`).appendTo(this);
    });
});

事件说明：

dragstart: 拖拽开始时触发，需设置 dataTransfer。
dragover: 拖拽元素悬停在目标上时触发，需阻止默认行为。
drop: 放置时触发，需阻止默认行为并处理数据。

方法三：自定义拖拽（兼容旧浏览器）

通过监听鼠标事件模拟拖拽效果。

$(function() {
  const $draggable = $("#draggable-element");
  let isDragging = false;
  let offset = { x: 0, y: 0 };

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

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

注意事项：

jquery拖拽