jQuery ui

Drag li element and drop to td of the html table using jQuery UI

The following example shows how to perform drag and drop between li and html table. You can drag items from left-hand side and can drop to td element of the html table.

Demo

Drag from the ul list

  • Item C
  • Item D
  • Item F
  • Item G
  • Item I

Drop to table

Item BItem EItem H
   
   

Source 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 table td"));
            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);
                        $("<span></span>").text(ui.draggable.text()).appendTo(this);
                        $("#allItems").find(":contains('" + ui.draggable.text() + "')")[0].remove();
                    }
                });
            }
        });
    </script>
    <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>
</head>
<body>
    <div id="maindiv">
        <div id="dragdiv">
            <h3>
                <span>Drag from the ul list</span></h3>
            <ul id="allItems" runat="server">
                <li id="node3">Item C</li>
                <li id="node4">Item D</li>
                <li id="node6">Item F</li>
                <li id="node7">Item G</li>
                <li id="node9">Item I</li>
            </ul>
        </div>
        <h3>
            <span>Drop to table</span></h3>
        <div id="dropdiv">
            <table width="300" border="1" cellspacing="1" cellpadding="1">
                <tr>
                    <td><span>Item B</span></td>
                    <td><span>Item E</span></td>
                    <td><span>Item H</span></td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
                <tr>
                   <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
  • vibha

    Object # has no method ‘text’

  • Shruti Jog

    hi, very nice work .. but the remove method is not working in IE. do you have any updates for this function?