jQuery 用户界面 : Sortable - Which event should I use?

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

问题是，更新事件在接收事件完成之前触发，并且我的项目尚未正确转换为漂亮的对象。

这就是一切，有人可以帮助我吗？

Answer 1

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

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

关于你的第二次尝试，我认为解决方案有点优雅。首先，使用bind声明你的更新方法(只有当你以这种方式绑定(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/ 中的示例