Remove dragged item after droping using JQuery UI

The demo shows the basic functionality of drag and drop using JQuery. After dropping, dragged item will be removed from the dragged list.

See the demo:

Demo

Drag and remove element

Item B
Item C
Item D
Item E
Item F
Item G
Item H
Item I

Drop to div’

Item A

Source Code

The complete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example- drag and drop li to div</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"
        type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#dragdiv li").draggable(
            {
                appendTo: "body",
                helper: "clone",
                cursor: "move",
                revert: "invalid"
            });
 
            initDroppable($("#dropdiv"));
            function initDroppable($elements) {
                $elements.droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-drop-hover",
                    accept: ":not(.ui-sortable-helper)",
 
                    over: function (event, ui) {
                        var $this = $(this);
                    },
                    drop: function (event, ui) {
                        var $this = $(this);
                        $("<li></li>").text(ui.draggable.text()).appendTo(this);
                        $("#allItems").find(":contains('" + ui.draggable.text() + "')")[0].remove();
                    }
                });
            }
        });
    </script>
 
</head>
<body>
    <div id="maindiv">
        <div id="dragdiv">
            <h3>
                <span>Drag and remove element from the ul list</span></h3>
            <ul id="allItems" runat="server">
                <li id="node2">Item B</li>
                <li id="node3">Item C</li>
                <li id="node4">Item D</li>
                <li id="node5">Item E</li>
                <li id="node6">Item F</li>
                <li id="node7">Item G</li>
                <li id="node8">Item H</li>
                <li id="node9">Item I</li>
            </ul>
        </div>
        <h3>
            <span>Drop to div'</span></h3>
        <div id="dropdiv">
            <li>Item A</li>
        </div>
    </div>
</body>
</html>

CSS

 <style type="text/css">
        .ui-drop-hover
        {
            border: 2px solid #bbb;
        }
        #dragdiv
        {
            width: 180px;
            height: 400px;
            float: left;
        }
        #dropdiv
        {
            width: 380px;
            height: 200px;
            float: right;
            margin-right: 10px;
            background-color: #F9F887;
        }
        #dropdiv li
        {
            padding-left: 10px;
        }
        #maindiv
        {
            width: 580px;
            height: 300px;
            border: 2px solid #bbb;
        }
    </style>