我的小提琴: http://jsfiddle.net/Yc9WY/42/
你会看到这里有两个组,每组3个投掷的容器定义。 您可以从移动组1事件2组,并到任何插槽。 这一切正常。
一旦一组是满的,我想给用户通过上下移动事件排序该组的能力。 他们应该仍然能够但是,如果他们选择移动事件到组外。
你会看到我注释掉的代码,我就开始了排序库整合,但我得到奇怪的行为。
注:我不能排序取代我可拖动/ 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
});
}
}
});
});
<div>Group 1:
<ul class="parent">
<li class="sort"><a href="" class="drag">event 1</a></li>
<li class="sort"><a href="" class="drag">event 2</a></li>
<li class="sort"></li>
</ul>
</div>
<div>
Group 2
<ul class="parent">
<li class="sort"></li>
<li class="sort"><a href="" class="drag">event 3</a></li>
<li class="sort"><a href="" class="drag">event 4</a></li>
</ul>
</div>
我真的与此挣扎,谢谢大家!
我破解了:)
小提琴(和CSS): http://jsfiddle.net/jhogervorst/CPA5Y/
HTML:
<div class="group">
<h1>Group 1</h1>
<ul class="parent">
<li class="droppable"><span class="draggable">Item 1</span></li>
<li class="droppable"><span class="draggable">Item 2</span></li>
<li class="droppable"></li>
</ul>
</div>
<div class="group">
<h1>Group 2</h1>
<ul class="parent">
<li class="droppable"><span class="draggable">Item 3</span></li>
<li class="droppable"></li>
<li class="droppable"><span class="draggable">Item 4</span></li>
</ul>
</div>
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, i.e., 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, i.e., 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();
}
}
});