jQuery ui

Remove dragged item after dropping 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>