Пользовательский интерфейс JQuery: сортируемый - какое событие я должен использовать? - PullRequest
Новая
       3

Пользовательский интерфейс JQuery: сортируемый - какое событие я должен использовать?

1 голос
/ 26 июля 2011

У меня проблема при работе с JQuery UI. Чего я пытаюсь добиться, так это:

  • У меня есть сортируемый список (.form_container) с объектами. Когда их позиция изменяется, ajax call обновляет базу данных.
  • За пределами этого списка у меня есть "текстовые элементы" (.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
  }         
});

Проблема в том, что событие update запускается до того, как событие receive завершено, и мой предмет не был должным образом преобразован в красивый объект.

Это все, кто-то может мне помочь?

1 Ответ

4 голосов
/ 26 июля 2011

Относительно вашей первой попытки, насколько мне известно, вызов с двойным отбрасыванием - известная проблема (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/

...