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声明你的更新方法（只有你以这种方式绑定它才能手动触发它）。

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/

中的示例

JQuery UI：可排序 - 我应该使用哪个事件？

1 个答案: