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

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.


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">
    <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"
            initDroppable($("#dropdiv table td"));
            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();
    <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;
    <div id="maindiv">
        <div id="dragdiv">
                <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>
            <span>Drop to table</span></h3>
        <div id="dropdiv">
            <table width="300" border="1" cellspacing="1" cellpadding="1">
                    <td><span>Item B</span></td>
                    <td><span>Item E</span></td>
                    <td><span>Item H</span></td>

2 thoughts on “Drag li element and drop to td of the html table using jQuery UI”

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

Comments are closed.