jqueryUI-draggable-droppable实现多元
2019-04-29 本文已影响1人
sherleysong
应用场景
- 痛点：
基于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'))
},
})
其他说明：
- 多元素的复制拖拽（三步主流程）
- 设置A区域内的元素可被拖动。
- 设置B区域可接受来自A区域内的这些子元素。
- 拖动开始时，将A区域内的选中状态的元素（即需要被拖动的目标元素）复制一份。
- 多元素的复制拖拽的其他配合
- 需标记A区域内可被拖动的子元素（即区分被选中的和未被选中的元素）
- 需保证A区域内被拖动的子元素样式独立性（在复制这些元素时即可完整复制）
- 其他
- 所以如果B区域放下的内容需要依赖A区域的内容（如顺序第几个），则需要排除掉末尾的C区域内容。原因是C区域的内容，会生成在A区域末尾。
- C区域的更多逻辑，应写在B区域droppable的drop方法里。
- C区域如需排序，可依赖jqueryUI的sortable交互方法。
- A区域支持多选的方案是相对独立的另一个功能。
- 判断点击时是否按住了shift、ctrl键来处理是否多选选中等。
- PS : 配合connectToSortable， 可以实现droppable元素的被插入。
