8

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

例如：

 <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!');
        }
    });
 });

因此，在图像被拖放到“容器”div 之后，我需要将实际的 html 元素移到那里。

因此，在事件发生后，如果我使用 Chrome 的开发工具查看源代码，我会看到：

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

这可能吗？

谢谢

4

2 回答 2

7

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

drop: function (event, ui) {
    $(this).append(ui.draggable);
}
于 2012-07-30T16:57:08.147 回答
3

在drop函数$(this)中，droppable是否接受draggable，所以只需使用.append()将draggable添加到droppable：http: //jsfiddle.net/saluce/P6TjC/

$(function () {
    $(".image").draggable({helper: 'original'});
    $(".container").droppable({
        drop: function (event, ui) {
            $(this).append(ui.draggable.css({position: 'static'}));
            alert('dropped!');
        }
    });
 });​
于 2012-07-30T16:56:59.457 回答