Mover nodo Div arriba y abajo usando Javascript / Jquery

Me preguntaba si hay una forma en Javascript para mover el elemento div del nodo arriba y abajo sin id. Cuando se selecciona el elemento y se hace clic con el botón derecho, aparece la opción Mover hacia arriba y Mover hacia abajo, ahora en Mover hacia arriba, hacer clic en Mover hacia arriba en div.

Por ejemplo..

1
2
3
4
5

Supongamos que hago clic derecho en div 3, luego la opción Move Up estará allí, así que al hacer clic en Move Up debería moverse hacia arriba y la nueva secuencia debería ser

  
1
3
2
4
5

Gracias por la ayuda.

Aquí hay un ejemplo. Prueba Demo .

Haga clic en el elemento para seleccionarlo.

 
1
2
3
4
5
Up Down

Biblioteca Jquery

Agrega esta biblioteca a tu página

  

Jquery

 $(document).ready(function(){ var selected=0; var itemlist = $('#items'); var len=$(itemlist).children().length; $("#items div").click(function(){ selected= $(this).index(); alert("Selected item is " + $(this).text()); }); $("#up").click(function(e){ e.preventDefault(); if(selected>0) { jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected))); selected=selected-1; } }); $("#down").click(function(e){ e.preventDefault(); if(selected < len) { jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected))); selected=selected+1; } }); }); 

Aquí está el código. Haga clic con el botón derecho en el elemento de la lista y muévalo hacia arriba o hacia abajo. HTML

 
  • Up
  • Down
1
  • Up
  • Down
2
  • Up
  • Down
3
  • Up
  • Down
4
  • Up
  • Down
5

CSS

 .block {width:300px;} .block > div { border:1px solid #e5e5e5; position:relative;} .contextMenu{ position:absolute; font-size:11px; width:50px; background:#e5e5e5; z-index:999; display:none;} .contextMenu ul{margin:0; padding:0; list-style:none;} .contextMenu li{border:1px solid #666; padding:5px;} 

Guión

 $('.block > div').mousedown(function(e){ if( e.button == 2 ){ $(this).find('.contextMenu').show().end().siblings('div').find('.contextMenu').hide(); }; }) $('.contextMenu li').on('click', function(){ var parentDiv = $(this).closest('div.contextMenu').parent(), dir = $(this).data('sort'); if(dir === 'up'){ parentDiv.insertBefore( parentDiv.prev() ) } else if(dir === 'down'){ parentDiv.insertAfter( parentDiv.next() ) } $('.contextMenu').hide() }); 

Fiddle Demo

Puede que esto no sea exactamente lo que quiere como respuesta, pero al ver lo que quiere lograr, puede usar jQuery UI Sortable

example here : Fiddle

 $("#downButton").click(function() { var selectedRows = $('#tblValues tr').find("td:first").find("input:checked").parents('tr'); $(selectedRows).each(function(index, item) { $(item).insertAfter($(item).next()); }); });