CODEWITHSUNDEEP
jqueryjquery-ui
John Smith
John Smith

Reputation: 6259

Draggable element disappears

I'm experimenting with JQuery ui and the draggable, droppable ...

So I tried to make some divs draggable and when they are dragged on droppable elements the dragged element should be appended before the droppable element! So I have this elementary 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">
....

And my Code looks like this:

$('.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));
};

So when an element is dropped onto a droppable element the function handleDrop is triggered. How you can see at the end of the code i try to insert the draggable element before the droppable element:

draggable.insertBefore($(this));

But somehow this won't work it only produces a white gap:

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

Why?

Upvotes: 1

Views: 574

Answers (1)

Trevor
Trevor

Reputation: 16116

Assuming you just wanted to append the box element with an 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

If you want to append both the .box and 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/

Upvotes: 1

Related Questions