Can not remove draggable from droppable

Question

I have jQuery's 1.6.4 draggable and droppable based on the answers from Stackoverflow post . Everything seem to work fine but I'm not able to remove the item from the droppable when you drag it out of the droppable area.

Please take a look at the JSfiddle: http://jsfiddle.net/tzp1560b/

Note I'm using ".live('mouseover',function(){" for draggable items as they are loaded via ajax.

HTML:

 <div id="drop">
<div class="box">
<ol class="box_drop"><span class="drop-placeholder">Drop Items Here!</span></ol>
</div>
</div>

<div id="search_result">
<ul class="list-entity">
<li id="object-22684">
<div class="clearfix">
<div class="body">
<h4>9032</h4>
<div class="content"></div>
</div>
</div>
</li>
<li id="object-22684" class="ui-draggable">
<div class="clearfix">
<div class="body">
<h4>9033</h4>
<div class="elgg-content"></div>
</div>
</div>
</li>

</ul>
</div>

JQuery:

 $(function () {

    $('#search_result li').live('mouseover',function(){
    $(this).draggable({
            cursor: "move",
            //revert: "invalid",
            opacity: 0.8,
            appendTo: "body",
            helper: "clone",
            start: function(event, ui) {
                $(ui.helper).width($(this).width());
            }
        });
});

    $("#drop ol").droppable({

        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {
            if (ui.draggable.is('.dropped')) return false;
            $(this).find(".drop-placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({
                appendTo: "body",
                helper: "clone"
            }).addClass('dropped');
        }
   }).sortable({
        items: "#drop ol",
        sort: function () {
            // gets added unintentionally by droppable interacting with sortable
            // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
            $(this).removeClass("ui-state-default");
        },
        out: function () {
            ui.item.remove();
            $(this).remove();
        }
    });

});

Can anyone help? Thank you.

Answer 1

Use $(ui.draggable).remove(); in the drop event to remove the element

http://jsfiddle.net/tzp1560b/1/