2013-07-21 18 views
8

私はjquery ui sortableで作業しています。 私はソート配列をドロップイベントの処理ファイルに渡すようにしたいと思います。私はBOX第2号を移動した場合jquery ui sortable dropイベント

1私が見つけた面白いもの..サンプルを見て http://jsfiddle.net/7Ny9h/

$(function() { 
    $("#sortable").sortable(); 
    $("#sortable").disableSelection(); 

    $("#sortable li").droppable({ 
     drop: function() { 
      var order = $("#sortable").sortable("serialize", {key:'order[]'}); 
      $("p").html(order); 
     } 
    }); 
}); 

は、BOX 2は、アレイの外に残されています。

おそらく、jquery UIドロップイベントがドラッグアンドドロップされたと見なされるため、「ドロップエンド」イベントの種類が必要なのかもしれません。

答えて

19

jQuery UI Sortable stopイベントの問題を解決できました。

$(function() { 
    $("#sortable").sortable(); 
    $("#sortable").disableSelection(); 

    $("#sortable").sortable({ 
     stop: function() { 
      var order = $("#sortable").sortable("serialize", {key:'order[]'}); 
      $("p").html(order); 
     } 
    }); 
}); 
+0

このdoesntの仕事http://jsfiddle.net/Tncg8/ – Prozi

+0

@Prozi、それはです。あなたのコメントのあなたのJSfiddleは、実際には "ソート可能な"イベントに "droppable"イベントを変更しません。これはあなたが失敗した理由です、私はあなたのためにあなたのJSfiddleを更新しました:http://jsfiddle.net/a94fak79/ – hazrpg

+0

下記の@ SoursopTreeの答えを見てください。 –

19

updateを使用して検出することもできます。あなたはそれが間違ってやっているので

$("#sortable").sortable({ 
     update: function() { 
      // do stuff 
     } 
    }); 
+1

一般的な "仕上げの移動"の代わりに、ある種の "成功"タイプのメッセージを行うことを検討している場合は、これが最も良い選択肢(「停止」ではなく)です。 – testing123

関連する問題