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();

现在，当用户向上或向下拖动一行时，我需要相应地更改活动编号...例如，如果他在“吃”行下拖动“欢迎”行，则表示活动编号“welcome”行现在是2（以前是1），“eat”行的活动编号是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：

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

当然：

newIndex = $(ui.helper).index('table tbody tr');
这选择当前的'helper element'，并使用jQuery index()方法查找该元素在传递给方法的选择器返回的元素中的位置，这种情况是table tbody tr返回的元素。如果页面上有多个table和tbody，则此索引将是错误的，因此选择表格的id将是{index('#idOfTable tbody tr')）将是更可取的。< / LI>
theID = ui.helper.id;
这会返回id变量中保留的项目的ui.helper（刚刚删除的元素）。
alert()只是一个例行的JavaScript警报。

参考文献：

sortable()
beforeStop（从上面的链接中选择“事件”菜单，然后点击beforeStop）：

当排序停止时，但占位符/助手仍然可用时，会触发此事件。

代码示例

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

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

index()。

Answer 2

您应该查看toArray method和stop event。

Example

Answer 3

不是说答案已经过了，但我找到了另一种简单的方法来了解元素被丢弃的索引位置。在stop方法中执行以下操作：

alert(ui.item[0].rowIndex)

它会告诉你新的指数位置。另外，如果你想知道起始索引（拖动前的位置），那么我们就要给出开始事件。语法与上面相同。继承了完整的例子func

var sourceIndex="";
$("#activities tbody").sortable(
    {
        start: function(event, ui) {
            sourceIndex=ui.item[0].rowIndex;
            id=ui.item[0].rowIndex;
        }
    }
        stop: function(event, ui) {
            alert("source index="+sourceIndex);
            alert("destination index"+ui.item[0].rowIndex);
        }
    }
);

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

3 个答案: