1

I've a problem while working with JQuery UI. What I'm trying to achieve is this:

  • I have a sortable list ( .form_container ), with objects. When their position are changed, ajax call updates the DB.
  • Outside of this list, I've got "text items" ( .create_item ). When those items are being dropped on the sortable list, I want to make an ajax call that will give me the content so I can transform my simple item into an object.
  • THEN, because a new object has been added, I want the ajax calls for position being fired. But not before my new object is properly loaded.

I hope I'm clear enough...

So first, I though about doing something like that

First Attempt :

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

Problem is, connectToSortable also triggers the drop event so this event is called twice thus causing trouble.

So I've followed someone's advice on SOF, and changed my code for something like that.

Second Attempt :

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

Problem is, the update event is triggered before the receive event is finished and my item hasn't been transformed properly into a nice object.

That's about everything, can someone help me?

4

1 回答 1

4

关于您的第一次尝试，据我所知，双挂电话是已知问题（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/中的这个例子

于 2011-07-26T12:11:46.870 回答