jQuery UI: On drop, attach the div to its droppabl

Question

I'm new to jQuery and jQuery UI. I'm trying to move a div from a parent div to another. So far, My "article" is draggable. The "droppable" stock properly identifies the article as it's move above it, but I can't seem to find how to attach this article to the stock .

I think I'm manipulating a "div encapsulating in a jQuery object", but I'm a bit lost here.

<div id="shelf" class="shelf">
    <div class="article">article</div>
</div>

<div id="stock" class="stock">
</div>

Then I have a script that's meant to add the article to the stock div, and remove it from the shelf div:

<script>

    $('.article').draggable();

    var stockArea = $('#stock').droppable();

    stockArea.bind( "drop", function(event, ui) {

        if ($(this).find(".article")){
            console.log('appending ' + ui);
            $(this).append(ui);
        }
    });
</script>

Am I doing this wrong? Thanks,

Answer 1

The ui itself contains event arguments. What you need to do to perform the action you want is:

<script>

    $('.article').draggable();

    var stockArea = $('#stock').droppable({
        drop: function (event, ui) {
            var target = $(event.target);
            $(ui.draggable).appendTo(target).remove();
        }
    });
</script>

Update ui.draggable is the reference to the specific element.