jQuery droppables - 在放置时更改元素答案

【问题标题】：jQuery droppables - Change element on dropjQuery droppables - 在放置时更改元素
【发布时间】：2010-09-22 08:24:27
【问题描述】：

我对 jQuery 有点陌生，希望有人能帮助我。

我试图在删除 (li) 后将一个元素 (li) 更改为另一个元素 (div)。

示例代码：

$("#inputEl>li").draggable({ 
    revert: true, 
    opacity: 0.4,
    helper: "clone"
});
$("#dropEl")
    .droppable({ 
        accept: ".drag",
        hoverClass: "dropElhover",
        drop: function(ev, ui) {
            // change the li element to div here
        }
});

问题是，当我使用时

drop: function(ev, ui) {
     $(ui.draggable).replaceWith("<div>Some content</div>");
}

触发上述功能时，原有的可拖动元素将被禁用。

我正在使用最新的 jQuery 和 jQuery UI 稳定版本。

【问题讨论】：

标签： jquery draggable droppable

【解决方案1】：

那么，您想要保持原始列表不变并将列表项放入 dropEl 中吗？这个怎么样：

drop: function(ev,ui) {
     $(this).append("<div>Some content</div>");
}

或者，如果你想用 div 元素替换列表元素，并且 div 元素也可以拖动，你可以试试这个：

drop: function(ev, ui) {
        $(ui.draggable).replaceWith("<div>Some content</div>");
        $("#inputEl>div").draggable({ 
            revert: true, 
            opacity: 0.4,
            helper: "clone"
        });
    }

原始的可拖动调用仅在调用时使项目可拖动。如果您更改或添加元素并希望它们可拖动，则需要再次调用 draggable() 函数。

【讨论】：

【解决方案2】：

感谢您的回复。

您的第一个代码有效，而且我还可以像这样对 droppable 中的 div 进行排序：

    drop: function(ev, ui) {
    $(this).append("<div>Some content</div>");
    $("#dropEl").sortable();
}

~~现在的问题是，一旦我将其更改为 div，我如何知道哪个列表是哪个？~~

我使用下面的代码来获取每个元素的id：

drop: function(ev, ui) {
            revert: true;
            var this_id = $(ui.draggable).attr("id");
            $(this).append('<div id="'+this_id+'">Some content</div>');
            $("#dropEl").sortable();
        }

【讨论】：