#2730 closed bug (invalid)
Unable to retreive index of sortable element during update event.
| Reported by: | GothAlice | Owned by: | paul |
|---|---|---|---|
| Priority: | undecided | Milestone: | |
| Component: | ui | Version: | 1.2.3 |
| Keywords: | sortables | Cc: | |
| Blocked by: | Blocking: |
Description
At no point during the internal handler for the stop event can the index for the current / last modified element be retrieved, thus the index of said element can not be retrieved from within any scripted update handler. The following code does not work, but should:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery.dimensions.js"></script>
<script src="jquery.interface.js"></script>
<script>
$(document).ready(function(){
$("#myList").sortable({
handle: 'b',
update: function(e, ui){
var index = $(ui.element).children().index(ui.item);
$("div#myListDragged").text("That was a div with new index #" + index);
}
});
$("li").dblclick(function () {
var index = $("#myList li").index(this);
$("div#myListClicked").text("That was div index #" + index);
});
});
</script>
<style>
ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }
b { cursor: move; }
div { color: red; }
</style>
</head>
<body>
<ul id="myList">
<li><b>Handle</b> Item 1</li>
<li><b>Handle</b> Item 2</li>
<li><b>Handle</b> Item 3</li>
<li><b>Handle</b> Item 4</li>
</ul>
<div id="myListClicked">Double-click to get index.</div>
<div id="myListDragged">Drag and drop to get index.</div>
</body>
</html>
The above is a combination of two pre-existing examples; one on the sample usage of the index method, the other on using sortables. Double-clicking the non-handle part of a list item works correctly.
I have tested this in both the current 'stable' and latest development snapshot.
Not being able to utilize index offsets makes the callback generally useless for my purposes, as my behind-the-scenes AJAX code only requires the ID of the node and the new offset to update the database.
Change History (3)
comment:1 Changed 10 years ago by
| Priority: | major → blocker |
|---|
comment:2 Changed 10 years ago by
comment:3 Changed 10 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | new → closed |
Hi there, the fix is really simple, it's not an issue in UI: the index() method cannot accept jQuery sets, and ui.item is a jQuery collection. change ui.item to ui.item[0] and it will work.
The effect can be simulated using the following snippit within the
updatehandler:I'm not sure how efficient this is, or if this will work for anything other than the simple test case, but it works. The element seemingly not being a child element of the container is still a problem, though, and this is a hack.