排序后放置的元素在哪里？

Question

你是否确定了使用jQuery UI排序的元素的新索引？

我有一个无序的列表,每个列表项都有一个id ...当我向上或向下拖动它并放置它时,我需要知道新的位置(含糊地说,就像为移动腾出空间的元素的id这个新元素)......甚至可能吗？我尝试使用.mousedown和.mouseup事件并获取this.id ...但它返回相同的元素被拖动两次.

简而言之,我们知道被拖动的元素,但是我们可以知道它最终被搁置的位置吗？

代码很简单......它实际上是一个表

---------HTML----------------
<table id="activities">
<thead>
<tr><th>Activity Name</th><th>Activity Number</th></tr>
</thead>
<tbody>
<tr id="node-1">
<td>Welcome</td>
<td>1</td>
</tr>
<tr id="node-2">
<td>Eat</td>
<td>2</td>
</tr>
<tr id="node-3">
<td>Walk</td>
<td>3</td>
</tr>
<tr id="node-4">
<td>Sleep</td>
<td>4</td>
</tr>
</tbody>
</table>

现在我通过jquery使行可以排序:

$("#activities tbody").sortable();

现在,当用户向上或向下拖动一行时,我需要相应地更改活动编号...例如,如果他在"吃"行下拖动"欢迎"行,则表示活动编号为"欢迎" "行现在是2(以前是1),"吃"行的活动数是1 ....要显示具有正确活动编号的新更新表,我需要知道它被丢弃的位置.

Answer 1

您可以使用方法中的beforeStop函数sortable():

$("#activities tbody").sortable(
    {
        beforeStop: function(event, ui) {
            newIndex = $(ui.helper).index('table tbody tr');
            alert(newIndex);
        }
    }
);

JS小提琴演示 ;

编辑提供有关检索id已删除元素的信息:

$("#activities tbody").sortable(
    {
        beforeStop: function(event, ui) {
            var index = $(ui.helper).index( 'table tbody tr' );
            alert( 'index = ' + index + '; id = ' + $(ui.helper).attr( 'id' ) );
        }
    }
);

JS小提琴演示.

编辑在答复问题,在注释中,从OP:

...问题解决了!!如果这对您来说不是问题,您能解释一下代码吗？

当然:

• newIndex = $(ui.helper).index('table tbody tr');
  这将选择当前的"辅助元素",并使用jQuery index()方法查找该元素在传递给方法的选择器返回的元素中的位置,在本例中是返回的元素table tbody tr.如果页面上有多个table并且tbody该索引将是错误的,那么通过表格选择id(index('#idOfTable tbody tr'))将是更好的选择.
• theID = ui.helper.id;
  这将返回变量中id保留的项目ui.helper(刚刚删除的元素).
• 这alert()只是一个例行的JavaScript警报.

参考文献:

• sortable()
• beforeStop(从上面的链接中,选择'events'菜单,然后点击beforeStop):

排序停止时会触发此事件,但占位符/帮助程序仍然可用时触发.

代码示例

提供一个回调函数来处理beforeStop事件作为init选项.

        $( ".selector" ).sortable({
            beforeStop: function(event, ui) { ... }
        });

• index().