aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Thursday, September 20, 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

Comments (1) -

real psychic reading
real psychic reading United States
9/10/2015 8:15:56 PM #

Sagittarius This is a two steps forward, 1 stage back, one step down the Rabbit Hole sort of 7 days. The first one will deal with the common situation and query. Another special present of Gemini is youthfulness.

Pingbacks and trackbacks (1)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5