使用光标(套索)绘制一个框将在此JSFiddle example中选择多个.item.

选定的.item变得可以拖延.没有.item的空.slot是有效的droppable.

当您在多个droppable上放置多个draggable时,只有相应的droppable无效时,只有.item哪个鼠标处于打开状态.

如果删除无效的droppable,如何使每个draggable revert？

使用Javascript：

$(function () {
  // we are going to store the selected objects in here
  var selected = $([]),total = [],offset = {
        top: 0,left: 0
    };

  $(document).selectable({
    filter: ".item",start: function (event,ui) { //remove draggable from selection,otherwise prevIoUs selection will still be draggable. 
        $(total).draggable("destroy");
    },selected: function (event,ui) { // push selected into total[].
        total.push(ui.selected)
    },unselected: function (event,ui) { //console.log('unselect ui: ',ui)
        u = ui.unselected
        //remove unselected from selection[].
        total = jQuery.grep(total,function (n) {
            return n !== u
        });
        //console.log('total array (unselected): ',total)
    },stop: function (vent,ui) {
        //remove duplicated element from total[].
        jQuery.unique(total)
        $(total).each(function () {
            $(this).draggable(dragOption)
        })
        //$(total).draggable(dragOption);
        //var widget = $( ".selector" ).draggable( "widget" );
        //console.log('widget: ',widget)
        console.log('break line---------------------------- ')
    }

  });

  //save drag option as an Obj.
  dragOption = {
    opacity: 0.45,delay: 300,connectToSortable: ".slot"
    //,helper: "clone",distance: 5,snap: ".slot",snapMode: "inner",revert: "invalid",ui) {
        console.log('draggable start ui: ',ui)
        selected = $(total).each(function () {
            var el = $(this);
            el.data("offset",el.offset())
        });
        offset = $(this).offset(); //get coordinates relative to document
    },drag: function (event,ui) { //console.log(offset.top)
        var dt = ui.position.top - offset.top,dl = ui.position.left - offset.left;
        selected.not(this).each(function () {
            // create the variable for we don't need to keep calling $("this")
            // el = current element we are on
            // off = what position was this element at when it was selected,before drag
            var el = $(this),off = el.data("offset");
            el.css({
                top: off.top + dt,left: off.left + dl
            });
        });
    },stop: function (event,ui) {
        console.log('drag stop ui : ',ui)
    }
  };

  //save drop option as an Obj.
  dropOption = {
    accept: '.item',drop: function (event,ui) {
        console.log('drop event : ',event);
        console.log('drop ui : ',ui)
    },activate: function (event,ui) { //console.log('this : ',this,'\n ui : ',out: function (event,ui) { //console.log('out',$(this))
    },deactivate: function (event,ui) { //console.log('deactivate')
    },tolerance: "intersect",instance: function (event,ui) { //console.log('instance ui : ',over: function (event,ui) { //console.log('this item : ',ui.draggable[0],'on this slot: ',this)
    },activeClass: "green3"

}
  // make empty slot droppable
  $(".slot:not(:has(>div))").droppable(dropOption)
})