<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul>cuando hago clic en tres quiero que sea como: -
<ul> <li>Three</li> <li>One</li> <li>Two</li> <li>Four</li> </ul>Si tienes jQuery puedes usar:
$('#items li').click(function() { $(this).parent().prepend(this); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id = "items"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul>También puedo escribir uno que no sea jQuery si es necesario.
manejar el evento de clic con el uso del método remove() y prepend() .
$("body").on("click",'li',function(){ $('ul').prepend($(this)); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul>Puedes probar esto
$('#list li').on('click', function () { var index = $('li').index(this); if (index !== 0) { $(this).prependTo($(this).parent()); } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> </head> <body> <form id="form1" runat="server"> <div> <ul id="list" style="cursor: pointer;"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> </div> </form> </body> </html>