I want to know the new position (div id) of an element I just moved
How can I do this ?
http://jqueryui.com/demos/sortable/#empty-lists
<script>
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
a开发者_运维百科lert("New position: " + ui.item.index());
}
});
$( "ul.droptrue" ).sortable({
connectWith: "ul"
});
$( "ul.dropfalse" ).sortable({
connectWith: "ul",
dropOnEmpty: false
});
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
});
</script>
<ul id="sortable1" class='droptrue'>
<li class="ui-state-default">Can be dropped..</li>
<li class="ui-state-default">..on an empty list</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class='dropfalse'>
<li class="ui-state-highlight">Cannot be dropped..</li>
<li class="ui-state-highlight">..on an empty list</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
<ul id="sortable3" class='droptrue'>
</ul>
In you callback, you can use event.pageX
and event.pageY
to determine the offset with respect to the page.
Your code works perfectly (see this fiddle) once you call sortable()
on an element that actually exists in the page:
$("#sortable2").sortable({
update: function(event, ui) {
alert("New position: " + ui.item.index());
}
});
精彩评论