Swap elements when drag and drop one onto another using jQuery UI

Demo shows how to swap elements between two list using drag and drop functionality. The Example have two elements list, you can drag and drop elements from one to another.

Demo

Swap items between lists

  • Item A
  • Item B
  • Item C
  • Item D
  • Item E
  • Item F
  • Item G
  • Item H
  • Item I
  • Item j
  • Item K
  • Item L
  • Item M
  • Item N
  • Item O
  • Item P
  • Item Q
  • Item R

Source Code

See the Complete source code for the above example.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title></title>
  6.     <style type="text/css">
  7.      .ui-drop-hover{border:2px solid #bbb;}
  8. #dragdiv li,#dropdiv li{border:1px solid #bbb;}
  9. #dropdiv li{padding-left:10px;}
  10. #maindiv{width:500px;height:350px;border:2px solid #bbb;}
  11. #allItems,#Ul1{list-style:none;}
  12. #dragdiv,#dropdiv{width:180px;height:250px;float:left;}
  13.     </style>
  14.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  15.     <script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
  16.     <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"
  17.         type="text/javascript"></script>
  18.     <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"
  19.         type="text/javascript"></script>
  20.     <script type="text/javascript">
  21.         $(function() {
  22.             $("#dragdiv li,#dropdiv li").draggable({
  23.                 appendTo: "body",
  24.                 helper: "clone",
  25.                 cursor: "move",
  26.                 revert: "invalid"
  27.             });
  28.  
  29.             initDroppable($("#dropdiv li,#dragdiv li"));
  30.             function initDroppable($elements) {
  31.                 $elements.droppable({
  32.                     activeClass: "ui-state-default",
  33.                     hoverClass: "ui-drop-hover",
  34.                     accept: ":not(.ui-sortable-helper)",
  35.  
  36.                     over: function(event, ui) {
  37.                         var $this = $(this);
  38.                     },
  39.                     drop: function(event, ui) {
  40.                         var $this = $(this);
  41.                         var li1 = $('<li>' + ui.draggable.text() + '</li>')
  42.                         var linew1 = $(this).after(li1);
  43.  
  44.                         var li2 = $('<li>' + $(this).text() + '</li>')
  45.                         var linew2 = $(ui.draggable).after(li2);
  46.  
  47.                         $(ui.draggable).remove();
  48.                         $(this).remove();
  49.  
  50.                         initDroppable($("#dropdiv li,#dragdiv li"));
  51.                         $("#dragdiv li,#dropdiv li").draggable({
  52.                             appendTo: "body",
  53.                             helper: "clone",
  54.                             cursor: "move",
  55.                             revert: "invalid"
  56.                         });
  57.                     }
  58.                 });
  59.             }
  60.         });
  61.     </script>
  62. </head>
  63. <body>
  64. <center>
  65.     <div id="maindiv">
  66.      <h3>
  67.                 <span>Swap items between lists</span></h3>
  68.         <div id="dragdiv">
  69.            
  70.             <ul id="allItems" runat="server">
  71.                 <li id="node1">Item A</li>
  72.                 <li id="node2">Item B</li>
  73.                 <li id="node3">Item C</li>
  74.                 <li id="node4">Item D</li>
  75.                 <li id="node5">Item E</li>
  76.                 <li id="node6">Item F</li>
  77.                 <li id="node7">Item G</li>
  78.                 <li id="node8">Item H</li>
  79.                 <li id="node9">Item I</li>
  80.             </ul>
  81.         </div>
  82.              <div id="dropdiv">
  83.                  <ul id="Ul1" runat="server">
  84.                 <li id="Li1">Item j</li>
  85.                 <li id="Li2">Item K</li>
  86.                 <li id="Li3">Item L</li>
  87.                 <li id="Li4">Item M</li>
  88.                 <li id="Li5">Item N</li>
  89.                 <li id="Li6">Item O</li>
  90.                 <li id="Li7">Item P</li>
  91.                 <li id="Li8">Item Q</li>
  92.                 <li id="Li9">Item R</li>
  93.             </ul>
  94.         </div>
  95.     </div>
  96.     </center>
  97. </body>
  98. </html>

 

Swap other elements

For the request of Alex(who inspire me to write a generic code that should be able to swap any type of elements such as div), i wrote a generic code for swapping between others elements and not just list.
 

Program 2.1

  1.            initSwap();
  2.            function initSwap() {
  3.                 initDroppable($("#dropdiv div,#dragdiv div"));
  4.                 initDraggable($("#dragdiv div,#dropdiv div"));
  5.             }
  6.            function initDraggable($elements) {
  7.                 $elements.draggable({
  8.                     appendTo: "body",
  9.                     helper: "clone",
  10.                     cursor: "move",
  11.                     revert: "invalid"
  12.                 });
  13.             }
  14.             function initDroppable($elements) {
  15.                 $elements.droppable({
  16.                     activeClass: "ui-state-default",
  17.                     hoverClass: "ui-drop-hover",
  18.                     accept: ":not(.ui-sortable-helper)",
  19.  
  20.                     over: function(event, ui) {
  21.                         var $this = $(this);
  22.                     },
  23.                     drop: function(event, ui) {
  24.                         var $this = $(this);
  25.  
  26.                         var linew1 = $(this).after(ui.draggable.clone());
  27.                         var linew2 = $(ui.draggable).after($(this).clone());
  28.                         $(ui.draggable).remove();
  29.                         $(this).remove();
  30.                         initSwap();
  31.                     }
  32.                 });
  33.             }
  34.         });

How to use the above code

Suppose you have the following html program that contains two div with ids dragdiv and dropdiv. both div contains the group of the div elements.

Program 2.2

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title></title>
  6.  
  7. </head>
  8. <body>
  9.     <center>
  10.         <div id="maindiv">
  11.             <h3>
  12.                 <span>Swap items between elements</span></h3>
  13.             <div id="dragdiv">
  14.                 <div class="child">
  15.                     A</div>
  16.                 <div class="child">
  17.                     B</div>
  18.                 <div class="child">
  19.                     C</div>
  20.                 <div class="child">
  21.                     D</div>
  22.             </div>
  23.             <div id="dropdiv">
  24.                 <div class="child">
  25.                     E</div>
  26.                 <div class="child">
  27.                     F</div>
  28.                 <div class="child">
  29.                     G</div>
  30.                 <div class="child">
  31.                     H</div>
  32.             </div>
  33.         </div>
  34.     </center>
  35. </body>
  36. </html>

 
For swapping the elements we have to make all div elements of the dragdiv and dropdiv to draggable and droppable. So you just need to change the initSwap() method (see the program 2.1).
In the initSwap() method call two other methods:
 
initDroppable(selector);
initDraggable(selector);
 

you can me both div as draggable and droppalbe by just pass the selector in the initDroppable(selector) and initDraggable(selector) as:
 

  1. function initSwap() {
  2.     initDroppable($("#dropdiv div,#dragdiv div"));
  3.     initDraggable($("#dragdiv div,#dropdiv div"));
  4.             }

 

I hope it will help you..thanks

facebooktwittergoogle_plusredditpinterestlinkedinmail
  • Alex

    Hi there. Your works great. Im a little confused on how implement this for a swap between divs instead of list items. Can you explain a little bit how to edit yout code to use in a more general aproach (swaping between others elements and not jus list)?

    • http://www.authorcode.com/ Hirendra Sisodiya

      hi Alex

      i have wrote a generic code as you suggested..
      You can see the program2.1 for the such a code that can able to swap others elements.

      let me know if you have any problem. thanks

      • Alex

        Wow, that’s great, thanks!! :D

  • Karthikeyan

    Hi,

    Program 2.1 seems to work good for swapping the elements but after swapping the content inside the grid are not working properly eg: the click event , grid.showColumn all those events are not working any idea ?

  • selvakumar

    i want to store the values on the UL elements how to store the Values????

    • http://www.authorcode.com/ Hirendra Sisodiya

      hi..i am not able to understand your problem..What does mean by values of UL elements and where to store the values?

      • selvakumar

        i want to store the li id values.