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

在删除排序表之前，我想知道它在列表中的位置

一旦用户选择了该项，它就会从DOM中删除。当我监听

change

事件时，除所选项目外，所有项目都在那里

$（“#可排序”）.sortable（'toArray'）

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

---

是否有一种方法可以在实际删除排序表之前获取其索引？

是否需要类似的内容

$（函数（）{
$（“#可拖动”）.draggable（）；
});
$（'#draggable'）.mousemove（函数（）{
var html=[“单击的div具有以下样式：”；
var styleProps=$（“#可拖动”）.css（[“顶部”、“左侧”、“右侧”、“底部”）；
$.each（样式道具、函数（道具、值）{
html.push（prop+“：”+值）；
});
$（“#数据”）.html（html.join（“
”））；
});

---

你想要这样的吗

$（函数（）{
$（“#可拖动”）.draggable（）；
});
$（'#draggable'）.mousemove（函数（）{
var html=[“单击的div具有以下样式：”；
var styleProps=$（“#可拖动”）.css（[“顶部”、“左侧”、“右侧”、“底部”）；
$.each（样式道具、函数（道具、值）{
html.push（prop+“：”+值）；
});
$（“#数据”）.html（html.join（“
”））；
});

---

这可以通过在

change

事件中查找占位符元素的索引来实现，我们确实希望确保忽略当前正在拖动的li元素。我只需添加一个类就可以做到这一点，您还可以使用

$.data（）

。如果不忽略当前正在拖动的li元素，则会重复计数，因为在

更改时，ul中存在占位符和原始元素

代码如下，这里是小提琴：

HTML
JS
这可以通过在
change
事件中查找占位符元素的索引来实现，我们确实希望确保忽略当前正在拖动的li元素。我只需添加一个类就可以做到这一点，您还可以使用
$.data（）
。如果不忽略当前正在拖动的li元素，则会重复计数，因为在
更改时，ul中存在占位符和原始元素

代码如下，这里是小提琴：

HTML
JS
 $(function() {
     $( "#draggable" ).draggable();
  });
  $('#draggable').mousemove(function(){
        var html = ["The clicked div has the following styles:"];
        var styleProps = $("#draggable").css( ["top", "left", "right", "bottom"] );
        $.each( styleProps, function( prop, value ) {
        html.push( prop + ": " + value );
        });
        $( "#data" ).html( html.join( "<br>" ) );       
  });

<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>

#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;
}

$( "#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' );
    }
});