aspx Tutorial

.NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services, .NET articles, Sharepoint 2010, visual studio 2010,Aamir Hasan,IT, Building Your First Web Application Project
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Wednesday, September 19, 2012 Total Views:  

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

Protected by Copyscape Online Plagiarism Tool

Pingbacks and trackbacks (1)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5