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:


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">
        <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"
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"
        <script type="text/javascript">
            $(function () {
                $("#dragdiv li").draggable(
                    appendTo: "body",
                    helper: "clone",
                    cursor: "move",
                    revert: "invalid"
                function initDroppable($elements) {
                        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);
                            $("#allItems").find(":contains('" + ui.draggable.text() + "')")[0].remove();
        <div id="maindiv">
            <div id="dragdiv">
                    <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>
                <span>Drop to div'</span></h3>
            <div id="dropdiv">
                <li>Item A</li>


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