jQuery UI sortable返回ul,但我真正想要的是两个li

Question

我正在使用jQuery UI可排序以允许用户随机播放列表,但stop事件返回整个列表.

所以我处理:

$(this).children('li').each(function(index) {

但我真正想要做的只是处理受影响的范围.我想我需要的是:被拖动的列表项,以及它之前(或之后,方便)放置的列表项.这样我就可以更新受影响的列表中的范围,而不必更新整个列表.

也许我应该继续为每个列表项添加一个data-Counter属性,看看它们是否与索引不同.

Answer 1

如果在拖动开始时保存项目的开始位置,则可以轻松完成.

$('ul').sortable({
    start: function(event,ui){
        ui.item.data('index',ui.item.index());
    },
    stop: function(event,ui){
        var startIndex = parseInt(ui.item.data('index'),10);
        var stopIndex = ui.item.index();

        var msg = '';
        msg += 'id of item: ' + ui.item.attr('id') + '\n';
        msg += 'start index: ' + startIndex + '\n';
        msg += 'stop index: ' + stopIndex + '\n';
        msg += 'prev item id: ' + ui.item.prev().attr('id') + '\n';
        msg += 'next item id: ' + ui.item.next().attr('id') + '\n';

        alert(msg);
    }
});

试试我的演示:http://jsfiddle.net/b8uJ8/