可拖动元素消失

Question

我正在尝试使用 JQuery ui 和可拖动、可放置...

所以我尝试让一些 div 可拖动，当它们被拖动到可放置元素上时，拖动的元素应该附加在可放置元素之前！ 所以我有这个基本的html：

<div class="container">
    <div class="box" id="1">1</div>
    <div class="box" id="2">2</div>
    <div class="box" id="3">3</div>
</div>
<div class="container">
....

我的代码如下所示：

$('.box').wrap("<div class='wrapper'></div>");
$('.box').before("<div class='drop'></div>");
$('.wrapper').draggable();
$('.drop').droppable({
    drop: handleDrop
});

function handleDrop(event,ui){
    var draggable = ui.draggable;
    alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
    draggable.insertBefore($(this));
};

所以当一个元素被放置到一个可放置元素上时，函数handleDrop被触发。您如何在代码末尾看到我尝试在可放置元素之前插入可拖动元素：

draggable.insertBefore($(this));

但不知何故，这不会起作用，它只会产生一个白色间隙：

http://jsfiddle.net/9G9Vf/2/

为什么？

Answer 1

假设您只想在 box 元素上附加一个 ID：

$('.box').wrap("<div class='wrapper'></div>");
$('.box').before("<div class='drop'></div>");
$('.wrapper').draggable();
$('.drop').droppable({
    drop: handleDrop
});

function handleDrop(event,ui){
    var draggable = ui.draggable;
    alert( 'The square with ID "' + draggable.find('.box').attr('id') + '" was dropped onto me!' );
    draggable.find('.box').insertBefore($(this));
};

http://jsfiddle.net/9G9Vf/6/

更新

如果您想同时附加.box 和droppable：

function handleDrop(event,ui){
    var draggable = ui.draggable;
    alert(ui.draggable.html());
    alert( 'The square with ID "' + draggable.find('.box').attr('id') + '" was dropped onto me!' );
    draggable.children().insertBefore($(this));
};

http://jsfiddle.net/9G9Vf/7/