Question

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

情况是：

用户将项目拖至div
在放置中，AJAX Post将发送到带有项目ID
成功后，我用从数据库中检索到的html标记替换项目被删除的div。 .replaceWith（data）注意：此标记是一个div，其ID与项目被删除的ID相同，其中包含一些其他元素。
这会加载更新的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元素替换DOM元素并使用完全相同的DOM id（因此id为“div1”的div被另一个id为“div1”的div替换）则关联的jQuery具有该DOM元素的数据会丢失。 jQuery的指针实际上指向页面上不再存在的ghost元素。

要查看证明，请在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不会保留附加到您要替换的droppable的{{1}}小部件。

您需要重新构建代码，以便在新内容上重新初始化div窗口小部件：

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的{{1}}打包在一起。这样，替换div不应删除droppable功能。

jQuery UI Draggable＆amp;在AJAX Post到Controller Action MVC.NET之后，Droppable中断了

2 个答案: