jQuery .swap() Plugin
.swap(index1, index2)
Description Swaps the elements within a jQuery object. Download the ZIP File with Source and DemoParameters:
- index1: The first index of the jQuery object being swapped
- index2: The second index of the jQuery object being swapped
Demos
Boxes of class "box" selected with jQuery via $(".box") are displayed with their respective index number. Choose two indexes to swap, and then click the swap button. Click "Toggle Index 0" to see that Index 0 will be toggled regardless of an element's starting position, indicating the elements of the jQuery object have indeed been swapped. *** Please note that the .swap() method does not physically swap the element position styles, only their abstract position within the jQuery object. The index-based style positioning is handled by the fakeFloat method on line 34.
Click to toggle source code
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="swap.jquery.js"></script> <style type="text/css"> body{background-color: #FFFFFF;} .box{width: 30px;height: 30px;border: 1px solid #000000;position: absolute; top: 10px;} #hideToggle{margin-top: 50px;} button{margin-top: 10px;margin-left: 10px;clear: both;float: left;width: 150px;height: 30px;} #firstIndex{clear: both;float: left;margin-left: 10px;} #secondIndex{float: left;margin-left: 10px;} #box1{background-color: #FFFF00;} #box2{background-color: #CCCCCC;} #box3{background-color: #009999;} #box4{background-color: #FF0000;} </style> <script type="text/javascript"> $(function(){ var boxes = $(".box"); $(boxes).each(function() { $(this).html($(this).index()); }); $(boxes).fakeFloat({margin: 10, offset: 20}); $("#swapTrigger").click(function() { var index1 = $('input:radio[name=index1]:checked').val(); var index2 = $('input:radio[name=index2]:checked').val(); boxes = $(boxes).swap(index1,index2); $(boxes).fakeFloat({margin: 10, offset: 20, speed: 300}).each(function() { $(this).html($(this).getIndexOf(boxes)); }); }); $("#hideToggle").toggle(function() { $(boxes[0]).hide(); $("#swapTrigger").attr('disabled', 'disabled'); }, function() { $(boxes[0]).show(); $("#swapTrigger").removeAttr('disabled'); }); }); </script> </head> <body> <div class="box" id="box1"></div> <div class="box" id="box2"></div> <div class="box" id="box3"></div> <div class="box" id="box4"></div> <button type="button" id="hideToggle">Toggle index 0</button> <button type="button" id="swapTrigger">Swap</button> <div id="firstIndex"> <b>Swap Index</b><br /> <input type="radio" name="index1" value="0" />0<br /> <input type="radio" name="index1" value="1" />1<br /> <input type="radio" name="index1" value="2" />2<br /> <input type="radio" name="index1" value="3" />3<br /> </div> <div id="secondIndex"> <b>With Index</b><br /> <input type="radio" name="index2" value="0" />0<br /> <input type="radio" name="index2" value="1" />1<br /> <input type="radio" name="index2" value="2" />2<br /> <input type="radio" name="index2" value="3" />3<br /> </div> </body> </html>