如何使用jQuery实现拖放功能？

# 使用jQuery实现拖放功能

## 基础实现

```javascript
// 1. 引入jQuery库
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

// 3. 实现基本拖放功能
$(function() {
  let isDragging = false;
  let offsetX, offsetY;
  
  $('#draggable').mousedown(function(e) {
    isDragging = true;
    offsetX = e.pageX - $(this).offset().left;
    offsetY = e.pageY - $(this).offset().top;
    $(this).css('cursor', 'move');
  });
  
  $(document).mousemove(function(e) {
    if (!isDragging) return;
    
    $('#draggable').css({
      'left': e.pageX - offsetX,
      'top': e.pageY - offsetY,
      'position': 'absolute'
    });
  });
  
  $(document).mouseup(function() {
    isDragging = false;
    $('#draggable').css('cursor', 'default');
  });
});

进阶功能实现

1. 限制拖动范围

$(function() {
  // ...前面的代码...
  
  $(document).mousemove(function(e) {
    if (!isDragging) return;
    
    let newX = e.pageX - offsetX;
    let newY = e.pageY - offsetY;
    
    // 限制在窗口范围内
    newX = Math.max(0, Math.min(newX, $(window).width() - $('#draggable').outerWidth()));
    newY = Math.max(0, Math.min(newY, $(window).height() - $('#draggable').outerHeight()));
    
    $('#draggable').css({
      'left': newX,
      'top': newY
    });
  });
});

2. 实现放置区域

// HTML
<div id="droppable" style="width:200px; height:200px; background:#eee;">放置区域</div>

// jQuery
$(function() {
  let isOverDroppable = false;
  
  // ...前面的拖动代码...
  
  $('#droppable').on({
    mouseenter: function() {
      isOverDroppable = true;
      $(this).css('background', '#ddd');
    },
    mouseleave: function() {
      isOverDroppable = false;
      $(this).css('background', '#eee');
    }
  });
  
  $(document).mouseup(function() {
    if (isDragging && isOverDroppable) {
      alert('已放入放置区域！');
    }
    isDragging = false;
  });
});

3. 使用jQuery UI简化实现

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

// HTML
<div id="draggable" class="ui-widget-content">拖动我</div>
<div id="droppable" class="ui-widget-header">放置区域</div>

// jQuery
$(function() {
  $("#draggable").draggable();
  
  $("#droppable").droppable({
    drop: function(event, ui) {
      alert("已放入放置区域！");
      $(this).css('background', '#5cb85c');
    },
    over: function() {
      $(this).css('background', '#5bc0de');
    },
    out: function() {
      $(this).css('background', '#f0ad4e');
    }
  });
});

性能优化建议

1. 事件委托：对于多个可拖动元素，使用事件委托提高性能

$(document).on('mousedown', '.draggable', function(e) {
  // 拖动逻辑
});

2. 节流处理：对mousemove事件进行节流

let lastMoveTime = 0;
$(document).mousemove(function(e) {
  let now = Date.now();
  if (now - lastMoveTime < 16) return; // 约60fps
  lastMoveTime = now;
  
  // 拖动逻辑
});