jQuery draggable + droppable - 将拖动的项目物理移动到已删除的容器中

Jar*_*red 8 jquery jquery-ui

我需要能够获取一个设置为draggable的元素,并将该元素物理移动到容器中,而不是像当前功能那样覆盖它.

例如:

 <div class="container"></div>
 <div class="image">
    <img class="thumb" src="images/Koala.jpg" alt="" />
 </div>

 $(function () {
    $(".image").draggable();
    $(".container").droppable({
        drop: function (event, ui) {
            alert('dropped!');
        }
    });
 });
Run Code Online (Sandbox Code Playgroud)

因此,在将图像拖放到"容器"div中之后,我需要将实际的html元素移动到那里.

事件发生后,如果我使用Chrome的开发工具查看源代码,我会看到:

 <div class="container">
    <div class="image">
        <img class="thumb" src="images/Koala.jpg" alt="" />
    </div>
 </div>
Run Code Online (Sandbox Code Playgroud)

这可能吗?

谢谢

Dan*_*elB 6

这应该将拖动的元素移动到dom树中的droppable.

drop: function (event, ui) {
    $(this).append(ui.draggable);
}
Run Code Online (Sandbox Code Playgroud)

  • 这确实把它放在了DOM对象中,但是(参见我的示例答案),draggable留下了CSS,它将它直观地放在容器之外. (2认同)