jQuery的可拖动和投掷的，下探全DIV内容 [英] Jquery Draggable and Droppable, dropping full div content

问题描述

我有一个div：

 ＆LT; D​​IV＆GT;
你好
＆所述; IMG SRC =cnnc.png/＆GT;
＆LT; / DIV＆GT;
   ＆LT; D​​IV ID =购物车＆GT;
＆LT; D​​IV CLASS =占位符＆GT;降此处＆lt; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

和我希望能够给它该div的所有内容拖拽到我投掷的框，并追加到我投掷的框。问题是，我投掷的code只追加文本框，我怎么可以改变它的所有内容追加：

  $（＃车）。可弃（{
        activeClass：UI状态默认
        hoverClass：UI状态悬停
        接受：：不是（的.ui-排序辅助），
        下降：函数（事件，UI）{
            $（本）.find（占位符）。remove（）方法。
            $（＆LT;立GT;＆LT; /李＆GT;）文本（ui.draggable.text（））appendTo（本）。;
        }
 

解决方案

您可以做到这一点是这样的：

  $（＃车）。可弃（{
    activeClass：UI状态默认
    hoverClass：UI状态悬停
    接受：：不是（的.ui-排序辅助），
    下降：函数（事件，UI）{
        $（本）.find（占位符）。remove（）方法。
        $（＆LT;立GT;＆LT; /李＆gt;中）。追加（ui.draggable.contents（）的clone（））appendTo（本）。
    }
}）;
 

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

I have a div:

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




   <div id="cart">
<div class="placeholder">drop here</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);
        }

解决方案

You can do it like 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);
    }
});

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

这篇关于jQuery的可拖动和投掷的，下探全DIV内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！