In this example, you will see how to drag and drop items from one list to another list using jQuery UI plugin. Jquery UI plugin provides Sortable method, by using this method you can drag and drop items from one list to another. Let’s start.   Add the following jquery and jquery UI plugin reference inside the head section of HTML page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"

        type="text/javascript"></script>

    <script src=http://code.jquery.com/ui/1.8.23/jquery-ui.min.js 
      type="text/javascript"></script>

I have written some css classes to apply some design on the lists and table. You can add your own CSS.

  <link href="Style.css" rel="stylesheet"/>

Note: You can find style.css from below

Add the following jquery script which will sort the two connected list and click method which will display all list one items (index no, list id and link text) inside the table on click on submit button.  

<script type="text/javascript">

        $(function () {

            $("#contentLeft ul, #contentright ul").sortable({

                connectWith: ".connectedSortable",

                placeholder: "ui-state-highlight"

            }).disableSelection();

            $("#idsubmit").click(function () {

                var msg = $("#table1 > tbody");

                var list = $("#contentLeft ul li");

                $(msg).html("");

                $(list).each(function (index) {

                    $(msg).append("<tr><td>" + index + "</td><td> " +
                           $(this).closest("li").prop("id") + "</td><td> " +
                                  $(this).text() + "</td></tr>");

                });

            });

        });

    </script>

  The following are HTML tags.  

<div id="content">

            <div class="edit-mu-li" id="contentLeft">

                <strong>Add</strong>

                <ul class="connectedSortable ui-sortable">

                    <li id="1"><a href="#">Link 1</a></li>

                    <li id="2"><a href="#">Link 2</a></li>

                    <li id="3"><a href="#">Link 3</a></li>

                    <li id="4"><a href="#">Link 4</a></li>

            </div>

            <div class="edit-mu-li" id="contentright">

                <strong>Remove</strong>

                <ul class="connectedSortable">

                    <li id="5"><a href="#">Link 5</a></li>

                </ul>

            </div>

            <p>

                <input type="button" id="idsubmit"value=" Submit "/>

            </p>

            <table id="table1">

                <thead>

                    <th>Index</th>

                    <th>ID</th>

                    <th>Name</th>

                </thead>

                <tbody></tbody>

            </table>

        </div>

Output

Download

Drag-and-drop-items-List.rar (2.36 kb)

See live demo