jqueryui:Sortable-我应该使用哪个事件？

我在使用JQuery UI时遇到问题。我试图实现的是：

• 我有一个带有对象的可排序列表（

  .form\u container

  ）。当它们的位置改变时，ajax调用会更新数据库
• 在此列表之外，我还有“文本项”（

  .create\u item

  ）。当这些项目被放在可排序列表上时，我想进行一个ajax调用，它将为我提供内容，这样我就可以将我的简单项目转换为一个对象
• 然后，因为添加了一个新对象，所以我希望触发对position的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
  }         
});

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

问题是，

connectToSortable

也会触发drop事件，因此此事件会被调用两次，从而引发问题

所以我听从了一些人关于软件的建议，修改了我的代码

第二次尝试：

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

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

问题是，更新事件是在接收事件完成之前触发的，并且我的物品没有被正确地转换为一个好的对象

---

就这些，有人能帮我吗？

关于您的第一次尝试，据我所知，双挂电话是已知的问题（）。我只能通过声明一些全局变量（计数器）来建议一些解决方法，然后使用它每秒调用一次：

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

关于你的第二次尝试，我认为这个解决方案有点优雅。首先，使用bind声明您的更新方法（仅当您以这种方式绑定它时，才可以手动触发它）

现在，创建如下所示的接收函数：

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

---

这里是JSFIDLE中关于您的第一次尝试的示例，据我所知，double-drop调用是已知的问题（）。我只能通过声明一些全局变量（计数器）来建议一些解决方法，然后使用它每秒调用一次：

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

关于你的第二次尝试，我认为这个解决方案有点优雅。首先，使用bind声明您的更新方法（仅当您以这种方式绑定它时，才可以手动触发它）

现在，创建如下所示的接收函数：

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

下面是JSFIDLE中的这个例子，这是一个很好的答案。似乎有效（我在谈论第二个解决方案，第一个似乎有点太粗糙）。我现在很难在可排序表中获取克隆项，但这是另一个问题。无论如何，非常感谢！回答得很好。似乎有效（我在谈论第二个解决方案，第一个似乎有点太粗糙）。我现在很难在可排序表中获取克隆项，但这是另一个问题。无论如何，非常感谢！