应用场景

痛点：

基于jqueryUI，默认的拖动只能对当前被点击的元素进行拖拽，不能实现多选拖拽。
拖动如果是对目标元素一个个的拖动，效率低下，操作不友好。

解决方案：
针对一批被识别的元素的拖放，可以快速批量的将该批人直接一次性拖入日历，提高效率，优化操作流程。

原理图.png

实现效果.png

第一步，设置可拖动的元素

使用选项 helper 创建一个空div
针对事件 start，第一个参数获取当时拖拽的DOM，第二个参数获取helper创建的空div，也就是拖拽时的div。
第二个参数将选中的需要被拖拽的元素们选出来，然后append到helper创建的空div里，即可实现拖出一份一模一样的DOM。
前提是，需要用个特殊的class来标记这些可被拖拽的元素（这里是ui-draggable-active）也就是拖拽开始时，将ui-draggable-active的元素都复制一遍，当然也包括被拖拽的自己。

————代码———

  // A区域的列表们，允许被拖拽
  $('#partA li').draggable({
    // 拖动开始时，创建一个空的C区域
    helper: function(event, ui) {
      return $('<div id="partC"></div>') // 创建空的C区域
    },
    // 拖动开始时，识别A区域中可被拖动的元素，并添加到C区域
    start: function(event, ui) {
      // 借用数组遍历方法处理DOM
      Array.prototype.forEach.call(
        $('#partA li.active'), // 识别A区域的被选中的列表们，标记了.active
        function(ele, index) {
          ui.helper.append($(ele).clone(true)) // 一次将A区域的被选中的列表添加到C区域
        }
      )
    },
  })

第二步，被拖入元素的DOM设置droppable

accept参数设置可接受的元素
tolerance参数设置为 'touch'，可控制碰到目标DOM即可生效，不用全部拖入才有用，对DOM很大很多的情况下有用。
drop参数用于控制放下后的回调事件。

——— 代码 ———

  // B区域接受拖入
  $('#partB').droppable({
    accept: '.active', // 接受来自A区域的选中的list
    tolerance: 'touch', // 该参数用于控制拖拽只要接触到B区域即可生效。
    drop: function() {
      // 处理拖放结束后的逻辑，TODO...  
      // 举例，将A区域内选中的元素（也是C区域内的元素）复制一份放入B区域内。
      $('#partB').append($('#partC li.active'))
    },
  })