2

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

情况是：

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

                    }
                });
            }
        });
    });
4

2 回答 2

3

使用 jQuery 和 DOM，如果您将一个 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});

    });
于 2011-03-15T15:22:04.010 回答
1

保留id要插入 DOM 的 HTML 不会保留droppable附加到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使用另一个div充当droppable. 这样，替换#layoutHeader不应删除该droppable功能。

于 2011-03-15T15:19:55.363 回答