JQuery - ¿Cómo mover un li a otra posición en el ul? (intercambio de 2 li's)

Question

¿Cuál es una buena manera de aplicar esto? Necesito un script que cambie la posición de dos < li> en un < ul>. Cree que debería ser posible lograrlo. Gracias por su respuesta.

HTML

<div id="awesome"> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
<li>Item 5</li> 
</ul> 
</div> 

Pseudo Javascript (jQuery)

$("#awesome ul li:eq(1)").exchangePostionWith("#awesome ul li:eq(3)"); 

HTML Resultado

<div id="awesome"> 
<ul> 
<li>Item 1</li> 
<li>Item 4</li> 
<li>Item 3</li> 
<li>Item 2</li> 
<li>Item 5</li> 
</ul> 
</div> 

Answer 1

Puede usar jQuery de .after() de elementos móviles alrededor. Cloné uno de ellos para que el original permanezca como marcador de posición. Es como si quisiera cambiar las variables a y b, necesitaría una tercera variable temporal.

$.fn.exchangePositionWith = function(selector) { 
    var other = $(selector); 
    this.after(other.clone()); 
    other.after(this).remove(); 
}; 

Ahora su pseudocódigo $("#awesome ul li:eq(1)").exchangePositionWith("#awesome ul li:eq(3)"); no es tan seudo :-)

Answer 2

que estaba necesitando la misma e hice un ejemplo, ver aquí http://jsfiddle.net/jeduarz/f88u9u9p/1/

HTML:

<p>Please press intro to select the item in the list</p> 
<ul class="thisList"> 
    <li tabindex="-2">I am wating a coffee</li> 
    <li tabindex="-2">I am wating a icecream</span></li> 
    <li tabindex="-2">I am wating a model girlfriend</li> 
    <li tabindex="-2">I am wating a jirafe</li> 
    <li tabindex="-2">I am wating a pankace</li> 
</ul> 
<br><small>You selected value is here</small> 
<div></div> 

CSS:

ul { 
    background:#F9F9F9); 
} 
    ul:focus { 
    outline:solid 1px green; 
} 
.thisList { 
    list-style-type:none; 
    padding:5px; 
} 
.thisList li { 
    border-bottom:1px solid #CCC; 
    padding:3px 5px; 
} 
li:focus { 
    outline:solid 1px #F90; 
} 
div { 
    border: 1px solid #CCC; 
    margin-top:20px; 
    height:50px; 
} 
p{ 
    background: #FE0; 
    padding:5px; 
    margin:10px 0; 
    width:100%; 
} 

JS (con jQuery):

$(document).keyup(function (event) { 
var keycode = (event.keyCode ? event.keyCode : event.which); 
tab_on = $(':focus').attr('tabindex'); 
// SCAPE 
if (keycode == 27) { 
    $(':focus').blur(); 
} 
if (keycode == 40) { // DOWN 
    if (tab_on == -2) { 
     li = $(':focus').next().is('li'); 
     if (li) $(':focus').next().focus(); 
     else { 
      $('.thisList li:first-child').focus(); 
     } 
    } 
} 
if (keycode == 38) { // UP 
    if (tab_on == -2) { 
     li = $(':focus').prev().is('li'); 
     if (li) $(':focus').prev().focus(); 
     else { 
      $('.thisList li:last-child').focus(); 
     } 
    } 
} 
// INTRO 
if (keycode == 13) { 
    content = $(':focus').html(); 
    $('div').html(content); 
} 
}); 

Answer 3

$("ul li a").click(function() { 
    $(this).parent().insertBefore('ul li:eq(0)'); 
    }); 


<ul> 
    <li><a>a</a></li> 
    <li><a>b</a></li> 
    <li><a>c</a></li> 
    <li><a>d</a></li> 
    <li><a>e</a></li> 
    <li><a>f</a></li> 
</ul>