Jquery remove item from dropped list

I have two list one contains strengh and another has opportunity, i drag and drop item from strength to opportunity, now i wanted to remove the dropped item from the list, but its not removing item from the list, instead its getting removed from the orginal list, can someone help me how to remove the dropped item from list, here is my code

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
    rel="stylesheet" type="text/css" /> 
<script src="js/jquery.min.js"></script> 
<script src="js/jquery-ui.js"></script> 




<style>
#strength, #opportunity { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#strength li, #opp开发者_如何学运维ortunity li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>


<script>
$(function() {

    //$("#opportunity li").bind('click', fn);


     var fn = function(event, ui) {
             var self = $(this);
             var itemID = ui.draggable.attr("id");

            if(itemID > 0){
                 //$("#strength li").append($(ui.draggable[2]).removeAttr("style"));
                 //alert(document.getElementById(itemID).innerHTML);
                 var itemval;
                 $("#" + itemID).remove();

                 //document.getElementById(itemID).style.display='none';
                //alert(self.id);
            }
        };


    $( "#opportunity" ).sortable({
        revert: false
    });


    $( "#strength li" ).draggable({
        connectToSortable: "#opportunity",
        helper: "clone",
        revert: "invalid"
    });

    $("#strength li").droppable({ drop: fn });

    $( "ul, li" ).disableSelection();

});


</script>




<div class="demo">

<ul id="strength">
    <li id="1" class="ui-state-highlight">Strength 1</li>
    <li id="2" class="ui-state-highlight">Strength 2</li>
    <li id="3" class="ui-state-highlight">Strength 3</li>
    <li id="4" class="ui-state-highlight">Strength 4</li>
</ul>

<ul id="opportunity">
    <li id="0" class="ui-state-default">Opportunity 1</li>
    <li id="0" class="ui-state-default">Opportunity 2</li>
    <li id="0" class="ui-state-default">Opportunity 3</li>
    <li id="0" class="ui-state-default">Opportunity 4</li>
    <li id="0" class="ui-state-default">Opportunity 5</li>
</ul>

</div><!-- End demo -->

---

The reason this is not working is because when you drop the item in to the list on the right it is actually in the new list so:

$("#strength li").droppable({ drop: fn });

No longer works. It will work if you drag items in the first list on top of each other, they just delete themselves.

Instead use this:

$( "#strength li" ).draggable({
    connectToSortable: "#opportunity",
    helper: "clone",
    revert: "invalid",
  stop: function(){$(this).remove();}
});

Or as per your coding style:

var fn2 = function(event, ui) {
   $(this).remove();
};

$( "#strength li" ).draggable({
    connectToSortable: "#opportunity",
    helper: "clone",
    revert: "invalid",
  stop: fn2
});

If you add in this:

stop: function(event, ui){if(!event){$(this).remove();}}

It will stop the left list from being able to delete itself. (bit of a hack, there must be a better way that doesnt rely on the event being empty).

---

Here is the answer to the question, i some how managed to remove item from the dropped list. all u have to do is call this function $("#strength").droppable({ drop: fn });, which inturn calls "fn" that does removes the items from the dropped list.

<script type="text/javascript" language="javascript">
    $(function () {

        var fn = function (event, ui) {
            var self = $(this);
            var itemID = ui.draggable.attr("id");
            if (itemID > 0) {
                var itemval = document.getElementById(itemID).innerHTML;
                $("#" + itemID).remove();
                document.getElementById(itemID).style.display = 'none';
                $("#" + itemID).remove();

                var newitemtoadd;
                newitemtoadd = '<li id="' + itemID + '" class="ui-state-highlight ui-draggable ui-droppable">' + itemval + '</li>';

                $("ul#strength").append(newitemtoadd);
                $("#strength li").draggable({
                    connectToSortable: "#opportunity",
                    helper: "clone",
                    revert: "invalid"
                });
            }
        };


        $("#opportunity").sortable({
            revert: false
        });


        $("#strength li").draggable({
            connectToSortable: "#opportunity",
            helper: "clone",
            revert: "invalid"
        });

        $("#strength").droppable({ drop: fn });

        $("ul, li").disableSelection();

    });


</script>