I’m sorry i haven’t posted new tutorials for a long time.
And very soon i’ll update the wordpress plugin Maribol IMDB.
So what i would like to teach you today is how to move an element using the powerfull jQuery.
Let’s asume that you want to order the order for some text inputs
HTML structure:
View Code HTML
<div>
<div>
<input type="text" name="values[]" value="value 1">
<a href="javascript:;" class="moveUp">↑</a>
<a href="javascript:;" class="moveDown">↓</a>
</div>
<div>
<input type="text" name="values[]" value="value 2">
<a href="javascript:;" class="moveUp">↑</a>
<a href="javascript:;" class="moveDown">↓</a>
</div>
<div>
<input type="text" name="values[]" value="value 3">
<a href="javascript:;" class="moveUp">↑</a>
<a href="javascript:;" class="moveDown">↓</a>
</div>
<div>
<input type="text" name="values[]" value="value 4">
<a href="javascript:;" class="moveUp">↑</a>
<a href="javascript:;" class="moveDown">↓</a>
</div>
</div>
|
Javascript:
View Code JAVASCRIPT
$(document).ready(function() { $('.moveUp').click(function(){ var current = $(this).parent(); current.prev().before(current); }); $('.moveDown').click(function(){ var current = $(this).parent(); current.next().after(current); }); }); |
If you have any question please leave them in the comments section.