Question

<ul style="padding: 5px; margin-left: 20px;">
Hardware
<li style="padding: 10px; margin-left: 40px;">Product 1</li>
<li style="padding: 10px; margin-left: 40px;">Product 2</li>
<li style="padding: 10px; margin-left: 40px;">Product 3</li>
<li style="padding: 10px; margin-left: 40px;">Product 4</li>
<li style="padding: 10px; margin-left: 40px;">Product 5</li>
</ul>

I have this structure i want to do a reodering interface where user can move product 5 up in the hiearchy by click up arrow and likewise bring something down. I want to do this using javascript of jQuery. I just need some hint about how to do it right.

Answer 1

demo here: http://jsfiddle.net/ruisoftware/ECpfK/

This code should help you get started:

var $moveProduct = $("li").eq(4); // product5

$("#up").click(function() {
    $moveProduct.prev().before($moveProduct);
});

$("#down").click(function() {
    $moveProduct.next().after($moveProduct);
});

It moves the product5 up and down.

I simplified your markup, by moving the inline css to a separated stylesheet.