Jquery Draggable и Droppable, отбрасывая полный контент div - PullRequest
Новая
       14

Jquery Draggable и Droppable, отбрасывая полный контент div

1 голос
/ 19 июня 2010

У меня есть div: 

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




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

, и я хочу иметь возможность перетащить его в мой ящик для выпадающих предметов и добавить все содержимое этого элемента в свой ящик для выпадения.Проблема в том, что мой сбрасываемый код только добавляет текст в поле, как я могу изменить его, чтобы добавить весь контент: 

$("#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);
        }

1 Ответ

3 голосов
/ 20 июня 2010

Вы можете сделать это так: 

$("#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).

...