AJAX Post 到 Controller 操作 MVC.NET 后，jQuery UI Draggable 和 Droppable 中断

Question

我在使用此功能时遇到问题。

情况是:

1. 用户将项目拖动到 div
2. 拖放时，AJAX Post 会通过项目 ID 发送到 Controller 操作
3. 成功后，我会用从数据库检索到的 html 标记替换项目所在的 div。 .replaceWith(data) 注意:此标记是一个 div，其 ID 与项目拖放到的 ID 相同，其中包含一些附加元素。
4. 这会加载更新后的 div。

所有这些都完美地工作，几乎，问题是我无法将不同的项目拖到 div 上。我确信这与 AJAX Post 之后加载的新 div(具有相同 ID)有关。

这是我的 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 });

                    }
                });
            }
        });
    });

Answer 1

使用 jQuery 和 DOM，如果您用具有完全相同 DOM id 的完全相同的 DOM 元素替换 DOM 元素(因此 id 为“div1”的 div 被另一个 id 为“div1”的 div 替换)，则关联的 jQuery该 DOM 元素的数据会丢失。 jQuery 的指针实际上指向页面上不再存在的幽灵元素。

要查看证明，请在 Firefox 中启动 firebug，然后直接进入

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

    });