如何使用jQuery Draggable和Droppable实现拖拽功能

下面是完整的攻略，包含了jQuery Draggable和Droppable的使用方法，以及两条示例说明。

使用jQuery Draggable和Droppable实现拖拽功能

1. 引入jQuery和jQuery UI

首先需要在页面中引入jQuery和jQuery UI库，示例如下:

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. 设置可拖拽和可放置的元素

接着，需要设置哪些元素可以拖拽和哪些元素可以接收拖拽的元素。示例如下：

<div class="drag">我是可拖拽的元素</div>
<div class="drop">我是可放置的元素</div>

3. 初始化拖拽和放置

接下来，需要初始化拖拽和放置事件。示例如下：

$(function() {
  // 初始化可拖拽元素
  $('.drag').draggable({
    // 设置拖拽方式
    // 'original'表示拖拽时，会将原始元素移动到指定位置；'clone'表示拖拽时，会复制一份元素移动到指定位置；'helper'表示拖拽时，会使用一个帮助元素移动到指定位置
    helper: 'clone'
  });

  // 初始化可放置元素
  $('.drop').droppable({
    // 设置接收拖拽元素的方式
    // 'intersect'表示只有当拖拽元素和放置元素有重叠部分时，才可以接收拖拽元素；'touch'表示只有当拖拽元素和放置元素触碰时，才可以接收拖拽元素；'fit'表示只有当拖拽元素完全覆盖放置元素时，才可以接收拖拽元素
    tolerance: 'intersect',

    // 设置放置成功后的回调函数
    drop: function(event, ui) {
      // 获取拖拽元素
      var $dragEle = $(ui.draggable);
      // 获取放置元素
      var $dropEle = $(this);

      // 在放置元素内添加拖拽元素
      $dropEle.append($dragEle.clone());
    }
  });
});

4. 示例说明1：图片拖拽

下面是一个示例，演示了如何把一张图片拖拽到一个区域内：

<!-- 可拖拽元素 -->
<img src="https://picsum.photos/200/300" class="drag" />
<!-- 可放置元素 -->
<div class="drop"></div>

$(function() {
  // 初始化可拖拽元素
  $('.drag').draggable({
    // 设置拖拽方式
    helper: 'clone'
  });

  // 初始化可放置元素
  $('.drop').droppable({
    // 设置接收拖拽元素的方式
    tolerance: 'intersect',

    // 设置放置成功后的回调函数
    drop: function(event, ui) {
      // 获取拖拽元素
      var $dragEle = $(ui.draggable);

      // 在放置元素内添加拖拽元素
      $(this).append('<img src="' + $dragEle.attr('src') + '" />');
    }
  });
});

5. 示例说明2：日程安排拖拽

下面是另一个示例，演示了如何把一个任务拖拽到日程安排中：

<!-- 可拖拽元素 -->
<div class="drag">任务1</div>
<div class="drag">任务2</div>
<!-- 可放置元素 -->
<div class="drop">
  <div class="day">
    <div class="time">8:00-9:00</div>
  </div>
  <div class="day">
    <div class="time">9:00-10:00</div>
  </div>
  <!-- 其他时间段 -->
</div>

/* 样式 */
.drag {
  background-color: #1e90ff;
  color: #fff;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}

.drop {
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll;
  height: 300px;
  background-color: #eee;
  padding: 10px;
}

.day {
  flex-basis: 200px;
  border-right: 1px solid #ddd;
  margin-right: 10px;
}

.time {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  font-weight: bold;
}

.task {
  background-color: #1e90ff;
  color: #fff;
  width: 100%;
  height: 50px;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}

$(function() {
  // 初始化可拖拽元素
  $('.drag').draggable({
    // 设置拖拽方式
    helper: 'clone'
  });

  // 初始化可放置元素
  $('.drop').droppable({
    // 设置接收拖拽元素的方式
    tolerance: 'intersect',

    // 设置放置成功后的回调函数
    drop: function(event, ui) {
      // 获取拖拽元素
      var $dragEle = $(ui.draggable);

      // 在放置元素内添加拖拽元素
      $(this).find('.day').each(function() {
        var $day = $(this);
        var dayTop = $day.offset().top;
        var dayLeft = $day.offset().left;
        var dayHeight = $day.height();
        var dayWidth = $day.width();
        var dayBottom = dayTop + dayHeight;
        var dayRight = dayLeft + dayWidth;

        var $time = $day.find('.time');
        var timeTop = $time.offset().top;
        var timeLeft = $time.offset().left;
        var timeHeight = $time.height();
        var timeBottom = timeTop + timeHeight;
        var timeWidth = $day.width();

        if (ui.offset.top > timeBottom && ui.offset.top < dayBottom && ui.offset.left > dayLeft && ui.offset.left < dayRight) {
          // 添加任务
          var taskName = $dragEle.text();
          var taskHtml = '<div class="task">' + taskName + '</div>';
          $time.parent().append(taskHtml);
        }
      });
    }
  });
});

以上就是使用jQuery Draggable和Droppable实现拖拽功能的完整攻略和两条示例说明。