JQuery UI：Sortable - 我应该使用哪个事件？

Question

我在使用 JQuery UI 时遇到了问题。我想要实现的是：

• 我有一个带有对象的可排序列表 (.form_container)。当它们的位置发生变化时，ajax 调用会更新数据库。
• 在这个列表之外，我还有“文本项目”（.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 也触发了 drop 事件，所以这个事件被调用了两次，从而造成了麻烦。

所以我听从了某人对 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
  }         
});

问题是，在 receive 事件完成之前触发了 update 事件，并且我的项目还没有被正确地转换成一个好的对象。

差不多了，有人能帮帮我吗？

Answer 1

关于您的第一次尝试，据我所知，两次挂断电话是已知问题 (http://url.ba/o88p)。我只能通过声明一些全局变量（计数器）来建议一些解决方法，然后每隔一次使用它来调用：

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

关于您的第二次尝试，我认为解决方案有点优雅。首先，使用 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');
      })
}

这是 jsfiddle 中的这个例子http://jsfiddle.net/7jPAv/