Reputation: 162
I found a strange behavior when dragging a li
from a ul
to another:
As you can see, "Item 1" appears as the first item of the ul
, but the firebug inspector show it as the second. This occurs when i take the .draggable
li and release on a .sortable
(not always!).
At some moment I need to check the order of the li
, obviously the order returned is the one shown on the firebug inspector and not the one shown in the page.
Edit: jsFiddle
The js:
$('ul.draggable li').draggable({
connectToSortable: ".sortable",
helper: function(event) {
return $('<span class="t3Helper" />')
.text($(this).text());
},
revert: "invalid",
cursorAt: { top: 0, left: 0 }
});
$('ul.sortable').sortable({
placeholder: "sortable-placeholder",
helper: "clone",
connectWith: ".sortable",
cursorAt: { top: 0, left: 0 },
update: function() {
if($('.draggable').children().length == 0 && last) {
$('.draggable').after('<button type="button" class="btn btn-primary btn-large pull-right" id="btnVerify">Verifica</button>');
$('#btnVerify').on('click', checkClosure);
$('.draggable').hide();
last = false;
}
},
receive: function (event, ui) { // add this handler
if(!ui.sender.hasClass("sortable")) {
$(this).data().sortable.currentItem.attr("id", ui.sender.attr('id'));
$(ui.item).detach(); // remove original item
}
}
});
The relevant html (edit):
<div class="main" id="t3_container" style="display: block;">
<div id="exercise">
<div id="table" style="display: block;">
<table>
<thead>
<tr class="exerciseTitle">
<th colspan="2">Title</th>
<th class="originalList"> </th>
</tr>
<tr class="groupTitle">
<th class="g0">Col1</th>
<th class="g1">Col2</th>
<th class="originalList"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="group">
<ul id="g0" class="sortable ui-sortable"></ul>
</td>
<td class="group" style="border-right: none;">
<ul id="g1" class="sortable ui-sortable"></ul>
</td>
<td>
<ul class="draggable">
<li id="s28.001" class="v138 g1 ui-draggable" style="display: list-item;">Item1</li>
<li id="s24.003" class="v132 g1 ui-draggable" style="display: list-item;">Item2</li>
<li id="s10.203" class="v69 g0 ui-draggable" style="display: list-item;">Item3</li>
<li id="s24.403" class="v134 g1 ui-draggable" style="display: list-item;">Item4</li>
<li id="s10.103" class="v68 g0 ui-draggable" style="display: list-item;">Item5</li>
<li id="s10.003" class="v67 g0 ui-draggable" style="display: list-item;">Item6</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Thank you, Dario
Upvotes: 0
Views: 746
Reputation: 16180
It may be worth while to use connected sortables rather the using sortable and draggable.
You may find it a bit simpler, and it looks to be less buggy, using something like this:
$('.sortable1').sortable({
placeholder: "sortable-placeholder",
connectWith: ".sortable",
helper: 'clone',
revert: "invalid",
cursorAt: {
top: 0,
left: 0
},
update: function () {
var last = true;
if ($('.sortable1').children().length === 0 && last) {
$('.sortable1').after('<button type="button" class="btn btn-primary btn-large pull-right" id="btnVerify">check</button>');
$('#btnVerify').on('click', checkClosure);
$('.sortable1').hide();
last = false;
}
}
});
$('.sortable').sortable({
placeholder: "sortable-placeholder",
helper: "clone",
connectWith: ".sortable",
cursorAt: {
top: 0,
left: 0
},
receive: function (event, ui) { // add this handler
if (!ui.sender.hasClass("sortable")) {
$(this).data().sortable.currentItem.attr("id", ui.sender.attr('id'));
$(ui.item).detach(); // remove original item
}
}
});
Upvotes: 1