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>
Joseph is the lead developer of Vert Studios
Follow Joseph on Twitter: