当前位置：首页 > jquery

jquery 拖动

2026-01-15 16:07:29jquery

jQuery 拖动实现方法

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

使用jQuery UI实现拖动

jQuery UI提供了draggable方法，可以轻松让元素可拖动。需要先引入jQuery和jQuery UI库。

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>

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

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

可以通过选项配置拖动行为：

$("#draggable").draggable({
  axis: "x", // 限制只能水平拖动
  containment: "parent", // 限制在父元素内拖动
  cursor: "move", // 拖动时鼠标样式
  opacity: 0.7 // 拖动时透明度
});

使用HTML5原生拖放API

如果不依赖jQuery UI，可以使用HTML5的拖放API结合jQuery事件处理：

jquery 拖动

<div id="draggable" draggable="true" style="width: 100px; height: 100px; background: #ccc;">拖动我</div>
<div id="droppable" style="width: 200px; height: 200px; background: #eee;">放置区域</div>

<script>
$(function() {
  var draggedItem;

  $("#draggable").on("dragstart", function(e) {
    draggedItem = $(this);
    e.originalEvent.dataTransfer.setData("text/plain", "dragged");
  });

  $("#droppable")
    .on("dragover", function(e) {
      e.preventDefault();
      $(this).css("background", "#ddd");
    })
    .on("drop", function(e) {
      e.preventDefault();
      $(this).append(draggedItem);
      $(this).css("background", "#eee");
    });
});
</script>

拖动排序实现

jQuery UI的sortable方法可以实现列表拖动排序：

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

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

自定义拖动事件处理

如果需要更精细的控制，可以结合mousedown、mousemove和mouseup事件实现自定义拖动：

$(function() {
  var isDragging = false;
  var startX, startY;

  $("#draggable").mousedown(function(e) {
    isDragging = true;
    startX = e.pageX - $(this).offset().left;
    startY = e.pageY - $(this).offset().top;
  });

  $(document).mousemove(function(e) {
    if (!isDragging) return;
    $("#draggable").css({
      left: e.pageX - startX,
      top: e.pageY - startY
    });
  }).mouseup(function() {
    isDragging = false;
  });
});