jQuery可以使用droppable进行排序

我的小提琴： http ： //jsfiddle.net/Yc9WY/42/

你在这里看到的是两组，每组有3个可放置的容器。 您可以将事件从组1移动到组2，并移动到任何插槽中。 这很好用。

一旦一个组已满，我想让用户能够通过上下移动事件来对该组进行排序。 如果他们选择，他们仍然可以将事件移出组。

您将看到我注释掉的代码，我开始集成可排序的库，但我的行为很奇怪。

注意：我无法单独替换我的draggable / dropable。 我需要明确定义可放置区域（每组3个），以便事件可以存在于组1的插槽1和3中。

这是我的代码

$(document).ready(function() { // $(".sort").sortable({ // revert: true // }); $(".drag").draggable({ //connectToSortable: ".sort", revert: true //helper: clone }); $(".sort").droppable({ drop: function(event, ui) { if (!($(this).children(".drag").size() == 1)) { $(this).append(ui.draggable); ui.draggable.css({ left: 0, top: 0 }); } } }); }); 
Group 1: 
 
event 1
 
event 2
 
 
 
 
 Group 2 
 
 
event 3
 
event 4
 
  

我真的很挣钱，谢谢大家！

Answer 1

我破解了:)

小提琴（和CSS）： http ： //jsfiddle.net/jhogervorst/CPA5Y/

HTML：

 
 
Group 1
 
 
Item 1
 
Item 2
 
 
 
 
 
Group 2
 
 
Item 3
 
 
Item 4
 
 
​ 

JavaScript的：

 $(".draggable").draggable({ revert: true, revertDuration: 0 }); $(".droppable").droppable({ activeClass: "active", hoverClass: "hover", accept: function (draggable) { // The droppable (li element). var droppable = $(this); // The droppable which contains the draggable, ie, the parent element of the draggable (li element). var draggablesDropable = draggable.parent(); // Is the draggable being dragged/sorted to the same group? // => We could just sort it, because there's always enough space inside the group. if (droppable.parent().is(draggablesDropable.parent())) { return true; } // Nope, the draggable is being dragged/sorted to another group. // => Is there an empty droppable left in the group to which the draggable is being dragged/sorted? else if (droppable.parent().find(".draggable").size() < droppable.parent().find(".droppable").size()) { return true; } // Nothing true? return false; }, drop: function(event, ui) { // The droppable (li element). var droppable = $(this); // The draggable (span element). var draggable = ui.draggable; // The droppable which contains the draggable, ie, the parent element of the draggable (li element). var draggablesDropable = draggable.parent(); // Is the draggable being dragged to it's own droppable? // => Abort, there's nothing to drag/sort! if (droppable.is(draggablesDropable)) { return; } // Is the draggable being dragged to an empty droppable? else if (!droppable.find(".draggable").size()) { // Just drop the draggable there. droppable.append(draggable); } // Is the draggable being dragged/sorted to the same group? // => We can just sort it, because there's always enough space inside the group. else if (droppable.parent().is(draggablesDropable.parent())) { // Is the draggable being dragged up? if (droppable.parent().find(".droppable").index(draggablesDropable) > droppable.parent().find(".droppable").index(droppable)) { // Add the dragged draggable's droppable before the droppable. draggablesDropable.insertBefore(droppable); } // No, the draggable is being dragged down. else { // Add the dragged draggable's droppable after the droppable. draggablesDropable.insertAfter(droppable); } } // Nope, the draggable is being dragged/sorted to another group. // => Is there an empty droppable left in the group to which the draggable is being dragged/sorted? else if (droppable.parent().find(".draggable").size() < droppable.parent().find(".droppable").size()) { // Find the first empty droppable in which the draggable is being dragged/sorted. var emptyDroppable = $($.grep(droppable.parent().find(".droppable"), function (item) { // Are there draggables inside this droppable? // => Return TRUE if not. return !$(item).find(".draggable").size(); })).first(); // Clone the dragged draggable's droppable before itself, because we need to remember it's position after moving it. var draggablesDropableClone = draggablesDropable.clone().insertBefore(draggablesDropable); // Is the draggable being dragged above the empty droppable? if (droppable.parent().find(".droppable").index(emptyDroppable) > droppable.parent().find(".droppable").index(droppable)) { // Add the dragged draggable's droppable before the droppable. draggablesDropable.insertBefore(droppable); } // No, the draggable is being dragged below the empty droppable. else { // Add the dragged draggable's droppable after the droppable. draggablesDropable.insertAfter(droppable); } // Remove the position of the dragged draggable, because there's still some css left of the dragging. draggable.css({"top": 0, "left": 0}); // Add the first empty droppable before the cloned draggable's droppable. Remove the latter afterwards. draggablesDropableClone.before(emptyDroppable).remove(); } } });​