1

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

一旦用户选择了该项目，它就会从 DOM 中删除。当我收听该change事件时，除了所选项目外，所有项目都在那里。

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

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

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

4

2 回答 2

1

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

代码如下，这里是小提琴：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' );
    }
});
于 2013-10-22T05:42:08.267 回答
0

你想要这样的东西吗？

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>" ) );       
  });
于 2013-05-28T00:53:39.510 回答