jQuery UI 可拖动 & AJAX Post 到控制器操作 MVC.NET 后的可删除中断

Question

我在使此功能正常工作时遇到问题。

情况是：

1. 用户将项目拖到 div 上。
2. 在放置时，AJAX Post 会被发送到具有项目 ID 的控制器操作。
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 元素（因此 id 为“div1”的 div 被另一个 id 为“div1”的 div 替换），则关联的 jQuery 数据将与该元素相关联。 DOM 元素丢失。 jQuery 的指针实际上指向页面上不再存在的幽灵元素。

要查看证据，请在 Firefox 中启动 firebug，然后简单地查看

$("#layoutHeader")

AJAX 帖子之前和之后。两次单击控制台中返回的元素。您会注意到，第二次单击（即 POST 返回后的一次）您的萤火虫将指向一个灰色的幽灵元素。

解决方案是稍微重构一下你的代码。试试这个

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

    });

Answer 2

保留要插入 DOM 的 HTML 的 id 不会保留附加到您的 div 的 droppable 小部件正在更换。

您需要重组代码，以便在新内容上重新初始化 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();

或者，您可以用另一个 div< 包装 #layoutHeader /code> 充当可放置。这样，替换 #layoutHeader 不应删除 droppable 功能。