Draggable элемент исчезает

Question

Я экспериментировал с JQuery UI и перетаскиваемые, Droppable ...

Так что я попытался сделать некоторые дивы перетаскиваемыми и когда они тащили на небьющихся элементах тащили элемент должен быть добавлен перед Droppable элемент! Поэтому у меня есть этот элементарный 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/

Update

Если вы хотите добавить как .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/