JQuery UI：Sortable - どのイベントを使用する必要がありますか？

Question

JQuery UIの操作中に問題が発生しました。私が達成しようとしているのは次のとおりです。

• 私はソート可能なリスト（.form_container）をオブジェクトとともに持っています。その位置が変更されると、ajaxコールによってDBが更新されます。
• このリストの外に、「テキストアイテム」（.create_item）があります。それらのアイテムがソート可能なリストにドロップされるとき、私はコンテンツを与えるAJAX呼び出しを行いたいので、単純なアイテムをオブジェクトに変換できます。
• 新しいオブジェクトが追加されているため、ajaxがpositionの起動を呼び出すようにします。しかし、私の新しいオブジェクトが適切に読み込まれる前ではありません。

  $(".create_item").draggable({ 
      containment: 'window', 
      connectToSortable: ".form_container", 
      helper: "clone", 
  }); 
  $(".form_container").droppable({ 
      accept: ".create_item", 
      tolerance: 'fit', 
      over: function(event,ui) { 
      // Something here 
      }, 
      drop: function(event,ui) { 
      // Ajax calls that changes my item into an object 
      } 
  }); 
  $(".form_container").sortable({ 
      axis: "y", 
      containment: ".form_container", 
      revert: true, 
      update: function(event, ui){ 
      // Ajax calls that update positions in DB 
      }   
  }); 
  

  問題は、connectToSortableです：私はその

  最初の試行のようなものをやってけれども、だから、最初

  ...私は十分に明確だ願ってい

またのドロップイベントをトリガーするので、このイベントは2回呼び出され、問題を引き起こします。

だから私はSOFに関する助言に従ってきたので、そのようなコードを変更しました。

第二の試み：

$(".create_item").draggable({ 
    containment: 'window', 
    connectToSortable: ".form_container", 
    helper: "clone", 
}); 
$(".form_container").droppable({ 
    accept: ".create_item", 
    tolerance: 'fit', 
    over: function(event,ui) { 
    // Something here 
    } 
    // No more drop function 
}); 
$(".form_container").sortable({ 
    axis: "y", 
    containment: ".form_container", 
    revert: true, 
    update: function(event, ui){ 
    // Ajax calls that update positions in DB 
    }, 
    receive: function(event,ui) { 
    // Ajax calls that changes my item into an object 
    }   
}); 

問題ががイベントが終了すると、私の項目が素敵なオブジェクトに適切に変換されていない受信する前更新イベントがトリガされ、です。

それはすべてについてですが、誰かが私を助けることができますか？

Answer 1

私の知る限り、ダブルドロップコールは既知の問題です（http://url.ba/o88p）。私はいくつかのグローバル変数（カウンタ）を宣言することにより、いくつかの回避策を提案し、その後、毎秒時間呼び出す作ってそれを使用することができます：私は解決策は、少しエレガントだと思うあなたの第二の試みについて

drop: function(event,ui) { 
    if (counter++%2) { 
     // Ajax calls that changes my item into an object 
    } 
    } 

を。まず、バインドを使用して更新メソッドを宣言します（手動でトリガーできるようにバインドした場合のみ）。

ここ

receive: function(event,ui) { 
    // don't let update be called 
    $('.form_container').unbind('sortupdate'); 

    $ 
     // call to create object using ajax 
     .ajax() 
     // when this call is finished 
     .done(function() { 
      $('.form_container') 
       .bind('sortupdate', _updateFunction) 
       .trigger('sortupdate'); 
     }) 
} 

はjsfiddle http://jsfiddle.net/7jPAv/