Create new row in the table after dropping an element using jquery ui

drag and drop in jquery ui

You can see the additional work in drag and drop functionality, When user will drop the element in the last row of the table, then new row will be inserted automatically.

See the demo and code:

Demo

Drag from here

  • Drop C
  • Drop D
  • Drop F
  • Drop G
  • Drop I
  • Drop J
  • Drop K
  • Drop L
  • Drop M

Drop to table

Drag BDrag EDrag H
   
   

Source Code

In the program we check that whether the dropped row is the last child of the table or not. If dropped row is the last then we will append the table with new row.The complete source code as follows:
 

<!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();
                        var $tr = $this.parent(); //this will give the tr
 
                        var objtds = $tr.next().find('td');
                        if (objtds.length == 0) {
                            // alert('fsfds');
                            var $objnext = $tr.clone(); //document.createElement('tr');
                            $objnext.find('span').remove();
 
 
                            $objnext.insertAfter($tr);
                            var $cells = $objnext.find("td");
                            initDroppable($("#dropdiv table td"));
                        }
                        else {
                        }
 
                        event.stopPropagation();
                    }
                });
            }
        });
    </script>
    <style type="text/css">
        .ui-drop-hover
        {
            border: 2px solid #bbb;
        }
        #dragdiv
        {
            width: 150px;
            height: 400px;
            float: left;
        }
        #dropdiv
        {
            width: 350px;
            height: 200px;
            float: right;
            margin-right: 10px;
            background-color: #F9F887;
        }
        #dropdiv li
        {
            padding-left: 10px;
        }
        #maindiv
        {
            width: 580px;
            height: 380px;
            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>
                  <li id="Li1">Item J</li>
                    <li id="Li2">Item K</li>
                      <li id="Li3">Item L</li>
                        <li id="Li4">Item M</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>

One thought on “Create new row in the table after dropping an element using jquery ui”

Comments are closed.