当前位置：首页 > jquery

jquery拖拽事件

2026-02-04 03:29:59jquery

jQuery 拖拽事件实现方法

jQuery 本身不直接提供拖拽功能，但可以通过结合 jQuery UI 或原生 HTML5 的拖拽 API 来实现。以下是两种常见的实现方式：

使用 jQuery UI 实现拖拽

jQuery UI 提供了 draggable 和 droppable 方法，可以轻松实现元素的拖拽和放置功能。

// 引入 jQuery 和 jQuery UI 库后
$(function() {
  // 使元素可拖拽
  $("#draggable").draggable({
    cursor: "move", // 拖拽时鼠标样式
    revert: "invalid", // 拖拽失败时返回原位
  });

  // 设置放置区域
  $("#droppable").droppable({
    accept: "#draggable", // 接受哪些元素
    drop: function(event, ui) {
      // 放置时的回调
      $(this).append(ui.draggable);
    }
  });
});

使用 HTML5 原生拖拽 API

HTML5 提供了原生的拖拽事件，可以通过 jQuery 绑定这些事件来实现拖拽功能。

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

  // 放置区域事件
  $("#droppable")
    .on("dragover", function(e) {
      e.preventDefault(); // 允许放置
    })
    .on("drop", function(e) {
      e.preventDefault();
      var id = e.originalEvent.dataTransfer.getData("text/plain");
      $(this).append($("#" + id));
    });
});

注意事项

使用 jQuery UI 时需要额外引入 jQuery UI 库。
HTML5 原生拖拽 API 的兼容性较好，但部分旧浏览器可能不支持。
拖拽元素的 draggable 属性需要设置为 true（HTML5 方式）。

实际应用示例

以下是一个完整的拖拽排序示例：

<div id="sortable">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<script>
$(function() {
  $("#sortable").sortable({
    placeholder: "ui-state-highlight"
  });
  $("#sortable").disableSelection();
});
</script>

此示例需要 jQuery UI 的 sortable 组件支持，可以实现列表项的拖拽排序功能。

jquery拖拽事件