Question

我想知道在排序之前列表中的排序位置。

用户选择该项后，将从DOM中删除该项。当我收听change事件时，除了所选项目之外，所有项目都在那里。

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

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

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

Answer 1

通过查找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' );
    }
});

Answer 2

你想要这样的东西吗？

http://jsfiddle.net/6G9rY/2/

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

可拖动的索引位置，同时仍被拖动

2 个答案:

HTML

CSS

JS