1

JQueryUIの操作中に問題が発生しました。私が達成しようとしているのはこれです：

  • オブジェクトを含むソート可能なリスト（.form_container）があります。それらの位置が変更されると、ajax呼び出しはDBを更新します。
  • このリストの外に、「テキストアイテム」（.create_item）があります。それらのアイテムが並べ替え可能なリストにドロップされているときに、コンテンツを取得するajax呼び出しを行い、単純なアイテムをオブジェクトに変換できるようにします。
  • 次に、新しいオブジェクトが追加されたので、ajaxが位置を呼び出すように要求します。しかし、新しいオブジェクトが正しくロードされる前ではありません。

私は十分に明確であることを願っています...

だから最初に、私はそのようなことをすることについて

最初の試み ：

$(".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に関する誰かのアドバイスに従い、コードをそのようなものに変更しました。

2回目の試み：

$(".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
  }         
});

問題は、受信イベントが終了する前に更新イベントがトリガーされ、アイテムが適切に適切なオブジェクトに変換されていないことです。

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

4

1 に答える 1

4

あなたの最初の試みに関して、私が知る限り、ダブルドロップコールは既知の問題です（http://url.ba/o88p）。グローバル変数（カウンター）を宣言し、それを使用して2回おきに呼び出しを行うことで、回避策を提案することしかできません。

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

2回目の試みに関しては、解決策は少しエレガントだと思います。まず、bindを使用して更新メソッドを宣言します（この方法でバインドした場合にのみ、手動でトリガーできます）。

var _updateFunction = function(event, ui){
    // logic for update, ajax calls, etc.
};
$('.form_container').bind('sortupdate', _updateFunction);

次に、次のような受信関数を作成します。

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');
      })
}

これがjsfiddlehttp : //jsfiddle.net/7jPAv/のこの例です

于 2011-07-26T12:11:46.870 に答える