5

サンプルを次の場所に配置しました：http：//jsbin.com/axegem/1

これがシナリオです。divをドラッグして別の場所にドロップするときは、divの新しい順序を取得する必要があります。たとえば、（私のサンプルに関して） DIV6の後にDIV3をドラッグアンドドロップしたとします。今、私はdivの新しい順序を取得しようとしています。テストのために、私は次のコードで彼らのhtmlテキストに警告しています：

$(".draggable").each(function(){
  alert($(this).html());
});

アラートの順序は、DIV 1、DIV 2、DIV 4、DIV 5、DIV 6、DIV 3、DIV 7、DIV 8、DIV9であると予想しています。しかし、サンプルで取得したのは、DIV 1、DIV 2、DIV 3、DIV 4、DIV 5、DIV 6、DIV 7、DIV 8、DIV9です。

divを新しい場所にドロップした後、どうすればdivの新しい順序を取得できますか？

4

2 に答える 2

8

ニーズに合わせてコードを少し変更しました。

Sortable機能を使用するように変更しました。これは、要素を並べ替えずにドラッグ可能な唯一のドラッグを使用したためです。

Sortable を使用すると、ソートされた要素を簡単に取得できます

$(document).ready(function() {
    $('#divOuter2').css("margin","-540px 0 0 400px");
    $('#divOuter3').css("margin","-540px 0 0 800px");

    $(".droppable").sortable({
      update: function( event, ui ) {
        Dropped();
      }
    });



  });



    function Dropped(event, ui){
      $(".draggable").each(function(){
        //var p = $(this).position();
        alert($(this).html());
      });
      refresh();
    }

.droppableクラスをソート可能としてDOM要素を設定しました。

次に、更新イベントで関数を呼び出していますDropped

例を見る

于 2013-02-01T16:18:18.797 に答える
3

ドラッグ可能に関する問題は、自由な空間で項目を移動するだけで、順序付けには関与しないことです。Droppable は役に立ちますが、それは、オブジェクトがコンテナー内にあるかどうかを判断することに関係しています。

ドラッグ可能およびドロップ可能を使用する代わりに、 sortable を試してください。アイテムの並べ替え順序の設定などを非常に簡単にします。これで、適切な順序に収まるかどうかを心配する必要がなくなりました。

これをチェックしてください：http://jsbin.com/axegem/6/

于 2013-02-01T16:14:54.013 に答える