javascript - 仍在拖动时可排序的索引位置

我想知道一个可排序对象在被删除之前在列表中的位置。

一旦用户选择了该项目，便将其从DOM中删除。当我监听change事件时，除了选中的项目，所有项目都在那里。

$( "#sortable" ).sortable('toArray')

当用户将所选项目移到其他元素上时，我想知道用户即将放置对象的建议区域。我想这样做，以便在用户决定删除它之前可以向用户提供更多反馈。

有没有办法在实际删除可排序索引之前将其获取？

最佳答案

这可以通过在change事件中找到占位符元素的索引来实现，我们确实要确保忽略当前正在拖动的li元素。我只需添加一个类即可，您也可以使用$.data()。如果您不忽略当前正在拖动的li元素，则将重复计算一次，因为在change时ul中有一个占位符和原始元素。

代码在下面，这是小提琴：http://jsfiddle.net/yYKmw/16/

的HTML

<ul  id="sortable">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<div id="output">
    <span></span>
</div>

的CSS

#sortable {
    list-style-type: none;
    margin: 1em;
    padding: 0;
    width: 30%;
    float: left;
}
#sortable li {
    height: 20px;
    background-color: khaki;
    margin: 3px;
    padding: 2px;
}
.sortable-placeholder {
    background-color: red !important;
}
#output {
    clear:both;
    border: thin solid black;
    height: 200px;
    width: 200px;
    color: black;
}

JS

$( "#sortable" ).sortable({
    placeholder: "sortable-placeholder",
    tolerance: "pointer",
    start: function(event, ui) {
        ui.item.addClass( 'ignore' )
    },
    change: function(event, ui){
        var elements = $('#sortable li').not('.ignore')
          , placeholderElement = elements.filter( '.sortable-placeholder' )
          , index = elements.index( placeholderElement );

        $('#output span').html('Current index: ' + index)
    },
    stop: function(event, ui) {
        ui.item.removeClass( 'ignore' );
    }
});

关于javascript - 仍在拖动时可排序的索引位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16778167/