当前位置：首页 > jquery

jquery拖动

2026-01-15 16:05:44jquery

jQuery 拖动实现方法

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

使用 jQuery UI 的 Draggable 组件

jQuery UI 提供了 draggable() 方法，可以轻松实现元素的拖动功能。

jquery拖动

<!-- 引入 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">

<!-- 可拖动元素 -->
<div id="draggable" style="width: 100px; height: 100px; background: #ccc; cursor: move;">
  拖动我
</div>

<script>
  $(function() {
    $("#draggable").draggable();
  });
</script>

draggable() 方法支持多种配置选项，例如限制拖动范围或设置拖动轴：

$("#draggable").draggable({
  containment: "parent",  // 限制在父元素内拖动
  axis: "x"               // 仅允许水平拖动
});

使用原生 HTML5 拖放 API

如果不依赖 jQuery UI，可以通过原生 HTML5 的拖放 API 实现类似功能。

jquery拖动

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

<script>
  $(function() {
    var draggedElement = null;

    $("#dragElement").on("dragstart", function(e) {
      draggedElement = this;
      e.originalEvent.dataTransfer.setData("text/plain", "drag-data");
    });

    $(document).on("dragover", function(e) {
      e.preventDefault(); // 允许放置
    });

    $(document).on("drop", function(e) {
      e.preventDefault();
      if (draggedElement) {
        $(draggedElement).css({
          left: e.pageX - $(draggedElement).width() / 2,
          top: e.pageY - $(draggedElement).height() / 2,
          position: "absolute"
        });
      }
    });
  });
</script>

自定义拖动实现

如果需要更轻量级的解决方案，可以通过监听鼠标事件手动实现拖动：

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

  $("#dragElement").mousedown(function(e) {
    isDragging = true;
    offset.x = e.pageX - $(this).offset().left;
    offset.y = e.pageY - $(this).offset().top;
    $(this).css("cursor", "grabbing");
  });

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

  $(document).mouseup(function() {
    isDragging = false;
    $("#dragElement").css("cursor", "grab");
  });
});

拖动排序实现

jQuery UI 还提供了 sortable() 方法，用于实现列表项的拖动排序：

<ul id="sortable">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

<script>
  $(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
  });
</script>