几个div，如何找到图像并删除父div

Question

我在 <div class="items" 上使用 draggable 来容纳这些元素

<div class="item">
    <div class="thumb">
        <img id="image" src="source.png" />
    </div>
    <div class="description">
        <p>Some description here</p>
    </div>
</div>

现在在 droppable 上，我只想保留那个 div 的图像。我试过以下代码，但似乎不起作用...

$("#dropbar").droppable({
    accept: ".deal-itinerary-item .row",
    hoverClass: correct_placeholder,
    activeClass: active_placeholder,
    revert: false,
    tolerance: "pointer",

    drop: function (event, ui) {
        var dragging = ui.draggable.clone().find("img").remove();
        $(this).append(dragging).addClass("dropped");
    }
});

认为这会找到 img 并从可拖动对象中删除任何其他内容。

我做错了什么，我该如何解决？

谢谢！

Answer 1

您可以直接克隆 img。

drop: function (event, ui) {
    var dragging = ui.draggable.find("img").clone();
    $(this).append(dragging).addClass("dropped");
}

Answer 2

您要删除示例中的 img，因为它是您调用 remove().

时 jQuery 对象选择的内容

 var image = ui.draggable.find("img").clone();
 $(this).append(image).addClass("dropped");

我不确定您要删除的内容是原始的可拖动内容还是您只是克隆了太多内容。但是如果要删除原来的draggable:

 var image = ui.draggable.find("img").clone();
 $(this).append(image).addClass("dropped");
 ui.draggable.remove();

可能有效。

几个div，如何找到图像并删除父div

Several divs, how to find image and remove the parent divs

html

javascript

jquery

draggable

jquery-ui-droppable