Jquery Draggable and Droppable，放弃全部div内容 [英] Jquery Draggable and Droppable, dropping full div content

问题描述

我有一个div：

<div>
Hello there
<img src="cnnc.png" />
</div>




   <div id="cart">
<div class="placeholder">drop here</div>
    </div>

我想要将其拖动到我的可放置的框中，并附加该div的所有内容到我的可丢弃的盒子。问题是我的可拖放代码只会将文本附加到框中，如何更改它以附加所有内容：

and I want to be able to drag it into my droppable box and append all the content of that div to my droppable box. The problem is that my droppable code only appends text to the box, how can I change it to append all content:

$("#cart").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function(event, ui) {
            $(this).find(".placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this);
        }

推荐答案

您可以这样做：

$("#cart").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) {
        $(this).find(".placeholder").remove();
        $("<li></li>").append(ui.draggable.contents().clone()).appendTo(this);
    }
});

这实际上是通过使用 .contents（） ，如果您需要任何事件处理程序和数据，请使用 .clone（true） 。

This actually clones the elements by using .contents(), if you need any event handlers and data, use .clone(true) instead.

这篇关于Jquery Draggable and Droppable，放弃全部div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！