jQuery UI Перетаскиваемые и перетаскиваемые перерывы после AJAX-сообщения в действие контроллера - PullRequest
Новая
       6

jQuery UI Перетаскиваемые и перетаскиваемые перерывы после AJAX-сообщения в действие контроллера

2 голосов
/ 15 марта 2011

У меня проблема с получением этой функциональности.

Ситуация:

  1. Пользователь Перетаскивает элемент в div
  2. При выпадении сообщение AJAX отправляется в действие контроллера с идентификатором элемента
  3. В случае успеха я заменяю div, на который был сброшен элемент, разметкой html, полученной из базы данных. .replaceWith (data) Примечание. Эта разметка представляет собой div с тем же идентификатором, что и элемент, на который был добавлен элемент, с некоторыми дополнительными элементами, содержащимися внутри.
  4. Это загружает обновленный div.

Все это работает отлично, почти, проблема в том, что я не могу перетащить другой элемент в div. Я уверен, что это как-то связано с загрузкой нового div (с тем же идентификатором) после AJAX Post.

Вот мой код jQuery 

$(function () {
        $('.draggable').draggable({ revert: true });
        $('#layoutHeader').droppable({
            drop: function (event, ui) {
                $.ajax({
                    type: "POST",
                    url: '/SiteSetup/GetMarkup/' + $(ui.draggable).attr("id"),
                    success: function (data) {
                        $('.draggable').draggable('destroy');
                        $('#layoutHeader').replaceWith(data);
                        $('.draggable').draggable({ revert: true });

                    }
                });
            }
        });
    });

Ответы [ 2 ]

3 голосов
/ 15 марта 2011

С jQuery и DOM, если вы заменяете элемент DOM на точно такой же элемент DOM с точно таким же идентификатором DOM (таким образом, div с идентификатором "div1" заменяется другим div с идентификатором "div1"), тогда связанный jQuery данные с этим элементом DOM теряются. Указатель jQuery фактически указывает на элемент-призрак, которого больше нет на странице.

Чтобы увидеть доказательство, запустите firebug в Firefox и просто зайдите 

$("#layoutHeader")

до и после вашего сообщения AJAX. Нажмите на элемент, возвращенный в консоли, оба раза. Вы заметите, что при втором щелчке (то есть после возврата POST) ваш firebug будет указывать на серый элемент-призрак.

Решение состоит в том, чтобы немного изменить свой код. Попробуйте это 

function handler(event,ui){
                $.ajax({
                    type: "POST",
                    url: '/SiteSetup/GetMarkup/' + $(ui.draggable).attr("id"),
                    success: function (data) {
                        $('.draggable').draggable('destroy');
                        $('#layoutHeader').replaceWith(data);
                        $('.draggable').draggable({ revert: true });

                    }
             $('#layoutHeader').droppable({drop: handler});
}


$(function () {
        $('.draggable').draggable({ revert: true });
        $('#layoutHeader').droppable({drop: handler});

    });
1 голос
/ 15 марта 2011

Сохранение id HTML, который вы вставляете в DOM, не сохранит виджет droppable, который был присоединен к div, который вы заменяете.

You 'Вам нужно будет реструктурировать ваш код так, чтобы виджет droppable был повторно инициализирован для нового содержимого: 

$('.draggable').draggable({ revert: true });

function createDroppable() {
    $('#layoutHeader').droppable({
        drop: function (event, ui) {
            $.ajax({
                type: "POST",
                url: '/SiteSetup/GetMarkup/' + $(ui.draggable).attr("id"),
                success: function (data) {
                    $('.draggable').draggable('destroy');
                    $('#layoutHeader').replaceWith(data);

                    /* Re-initialize the droppable widget: */
                    createDroppable();

                    $('.draggable').draggable({ revert: true });
                }
            });
        }
    });
}   

createDroppable();

В качестве альтернативы, вы можете обернуть #layoutHeader другим div, который действует как droppable.Таким образом, замена #layoutHeader не должна удалять функциональность droppable.

...