jquery - 排序后元素放置在哪里？

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 Fiddle demo ;

<小时/>

编辑以提供有关检索 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 Fiddle demo .

<小时/>

编辑以回应OP中的问题、评论:

...problem solved!! If it's not a matter of trouble for you, can you explain the code..?

当然:

• 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 (从上面的链接中，选择“事件”菜单，然后单击 beforeStop):

This event is triggered when sorting stops, but when the placeholder/helper is still available.

Code examples

Supply a callback function to handle the beforeStop event as an init option.

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

• index() .