拖放多个选定的可拖动对象并使用 Jquery UI 还原无效的对象 [英] Drag and drop multiple selected draggables and revert invalid ones using Jquery UI

问题描述

在这个JSFiddle中绘制一个带有光标的框(套索)将选择多个.item例子.

选定的 .item 变为可拖动的.里面没有 .item 的空 .slot 是一个有效的 droppable.

当你在多个 droppables 上放置多个 draggables 时，如果对应的 droppable 无效，只有鼠标所在的 .item 会恢复.

如果无效可拖放，如何使所有可拖拽恢复?

Javascript:

$(function () {//我们将在这里存储选定的对象选择的变量 = $([]),总计 = [],偏移 = {顶部:0，左:0};$(document).selectable({过滤器:.item"，start: function (event, ui) {//从选择中移除可拖动，否则之前的选择仍然是可拖动的.$(total).draggable("destroy");},selected: function (event, ui) {//将所选推入 total[].total.push(ui.selected)},unselected: function (event, ui) {//console.log('unselect ui: ',ui)u = ui.unselected//从选择[]中删除未选择的.total = jQuery.grep(total, function (n) {返回 n !== u});//console.log('total array (unselected): ',total)},停止:功能(通风口，用户界面){//从total[]中删除重复的元素.jQuery.unique(总计)$(total).each(function () {$(this).draggable(dragOption)})//$(total).draggable(dragOption);//var widget = $( ".selector" ).draggable( "widget" );//console.log('widget: ',widget)console.log('断行---------------------------- ')}});//将拖动选项保存为Obj.拖动选项 = {不透明度:0.45，延迟:300，connectToSortable: ".slot"//,helper: 克隆",距离:5，snap: ".slot",snapMode:内部"，回复:无效"，开始:功能(事件，用户界面){console.log('可拖动开始 ui: ', ui)选择 = $(total).each(function () {var el = $(this);el.data("偏移量", el.offset())});offset = $(this).offset();//获取相对于文档的坐标},拖动:函数(事件，ui){//console.log(offset.top)var dt = ui.position.top - offset.top，dl = ui.position.left - offset.left;selected.not(this).each(function () {//创建变量，因为我们不需要继续调用 $("this")//el = 我们所在的当前元素//off = 这个元素在被选中时的位置，在拖动之前var el = $(this),off = el.data("偏移量");el.css({顶部:off.top + dt，左:off.left + dl});});},停止:功能(事件，用户界面){console.log('拖动停止 ui : ', ui)}};//将放置选项保存为Obj.dropOption = {接受:'.item',下降:功能(事件，用户界面){console.log('丢弃事件:', 事件);console.log('删除用户界面:', 用户界面)},activate: function (event, ui) {//console.log('this : ',this,'
 ui : ',ui)},out: function (event, ui) {//console.log('out',$(this))},停用:功能(事件，用户界面){//console.log('停用')},容差:相交"，instance: function (event, ui) {//console.log('instance ui : ',ui)},over: function (event, ui) {//console.log('this item : ',ui.draggable[0],'on this slot: ',this)},活动类:green3"}//使空槽可放置$(".slot:not(:has(>div))").droppable(dropOption)}) <!--文档准备就绪-->

HTML:

<div id="容器"><div id="header"></div><div class="box" id="boxA"><h4>框A</h4>
<div class="item" id="a1"></div>
<div class="item" id="a2"></div>
<div class="item" id="a3"></div>
<div class="slot" id="A4"></div><div class="slot" id="A5"></div>

<div class="box" id="boxB"><h4>框B</h4><div class="slot" id="B1"></div><div class="slot" id="B2"><div class="item" id="b2"></div>

<div class="slot" id="B3"></div><div class="slot" id="B4"></div><div class="slot" id="B5"><div class="item" id="b5"></div>