My fiddle: http://jsfiddle.net/Yc9WY/42/
What you'll see here are two groups, each with 3 droppable containers defined. You can move events from group 1 to group 2, and into any slot. This works just fine.
Once a group is full, I would like to give the user the ability to sort that group by moving events up and down. They should still be able to move the event out of the group if they choose however.
You'll see my commented out code where I began to integrate the sortable library, but am getting odd behavior.
Note: I cannot replace my draggable/dropable with sortable solely. I need explicitly defined droppable areas (3 per group) so that an event can exist in slot 1 and 3 of group 1.
Here's my code
$(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>
I'm really struggling with this, thanks all!
I cracked it :)
Fiddle (and CSS): http://jsfiddle.net/jhogervorst/CPA5Y/
HTML:
JavaScript: