0

並べ替え可能でドラッグ可能なjQuery UIを一緒に使用すると、非常に具体的な問題が発生します。新しくドラッグされた要素のリストでインデックス/配置を取得できるようにしたい。リスト内で要素を移動すると、これを取得できます。

$("#draggable").draggable({
    cursor: "move",
    helper: "clone",
    connectToSortable: ".sortable"
});
$( ".sortable" ).sortable({
    items: 'li',
    stop: function(event, ui) {
        index = ui.item.index()+1;
        console.lo(index);
    },
    connectWith: ".sortableSub",
    appendTo: 'body',
}).disableSelection();

上記のコードは正常に機能しますが、ドラッグされた要素で同じことを行うと.

receive: function(event, ui) {
    console.log(ui.item.index());
},

receive: の代わりに stop: で同じことをすると、ui.item.index を使用すると 0 が返されます。代わりに -1 が返されます。

4

3 に答える 3

3

ソート可能なリストで追加されたアイテムのインデックスを取得する方法は次のとおりです。

receive: function( event, ui ) {
  var newIndex = $(this).data("ui-sortable").currentItem.index()
}
于 2014-06-24T11:38:02.883 に答える
1

これを試して：

$("#draggable").draggable({
    cursor: "move",
    helper: "clone",
    connectToSortable: ".sortable"
});
$( ".sortable" ).sortable({
    items: 'li',
    stop: function(event, ui) {
        index = ui.item.index()+1;
        console.log(index);
    },
    connectWith: ".sortableSub",
    appendTo: 'body',
}).disableSelection();

$( "#draggable" ).on( "dragcreate", function( event, ui ) {

  console.log(ui.item.index());
});

またはこれを試してください：

$("#draggable").draggable({
    cursor: "move",
    helper: "clone",
    connectToSortable: ".sortable",
    create: function( event, ui ) {
        var index = ui.item.index()+1;
         console.log(index);
    }
});
$( ".sortable" ).sortable({
    items: 'li',
    stop: function(event, ui) {
        index = ui.item.index()+1;
        console.log(index);
    },
    connectWith: ".sortableSub",
    appendTo: 'body',
}).disableSelection();
于 2013-08-07T08:21:17.787 に答える