Mueve los objetos en Ul Li hacia arriba y hacia abajo

Tengo un Ul li y al hacer clic en los botones Arriba y Abajo que quiero mover para mover los elementos li hacia arriba y hacia abajo. Aquí está el html que se representa en la página.

Ya probé la solución mencionada en el enlace ¿Puedo usar jQuery para desplazar fácilmente los elementos li hacia arriba o hacia abajo? pero no funcionó para mí.

 

Puede intentar algo como lo siguiente:

 $('.upbutton').on('click', function () { var hook = $(this).closest('.liEllipsis').prev('.liEllipsis'); var elementToMove = $(this).closest('.liEllipsis').detach(); hook.before(elementToMove); }); $('.downbutton').on('click', function () { var hook = $(this).closest('.liEllipsis').next('.liEllipsis'); var elementToMove = $(this).closest('.liEllipsis').detach(); hook.after(elementToMove); }); 

https://jsfiddle.net/16sebrjq/

Si quieres moverte usando un botón externo y un elemento li seleccionado, prueba algo como esto:

 $('.liEllipsis').on('click', function () { $('.selected').removeClass('selected'); $(this).addClass('selected'); }); $('.upbutton').on('click', function () { var $currentElement = $('#ul_li_SubCategories .selected'); moveUp($currentElement); }); $('.downbutton').on('click', function () { var $currentElement = $('#ul_li_SubCategories .selected'); moveDown($currentElement); }); var moveUp = function ($currentElement) { var hook = $currentElement.prev('.liEllipsis'); if (hook.length) { var elementToMove = $currentElement.detach(); hook.before(elementToMove); } }; var moveDown = function ($currentElement) { var hook = $currentElement.next('.liEllipsis'); if (hook.length) { var elementToMove = $currentElement.detach(); hook.after(elementToMove); } }; 

https://jsfiddle.net/16sebrjq/1/

Mira este jsfiddle

Usa este código jQuery, solo muevo los elementos hacia abajo en este ejemplo:

 $.fn.moveUp = function() { before = $(this).prev(); $(this).insertBefore(before); } $.fn.moveDown = function() { after = $(this).next(); $(this).insertAfter(after); } $('li').click(function() { $(this).moveDown(); }); 

Acabo de obtener el ejemplo de aquí

puedes intentar esto

 $(function(){ $('.glyphicon-arrow-up').on('click', function(e){ e.preventDefault(); var _this = $(this); var _parent = _this.closest('ul'); var _child = $(_parent).find('li'); var selected= $(this).closest('li').index(); jQuery($(_parent).children().eq(selected-1)).before(jQuery($(_parent).children().eq(selected))); }); $('.glyphicon-arrow-down').on('click', function(e){ e.preventDefault(); var _this = $(this); var _parent = _this.closest('ul'); var _child = $(_parent).find('li'); var selected= $(this).closest('li').index(); jQuery($(_parent).children().eq(selected+1)).after(jQuery($(_parent).children().eq(selected))); selected=selected+1; }); }) 
  
  • Sample 1 UpDown
  • Sample 2 UpDown
  • Sample 3 UpDown
  • Sample 4 UpDown
  • Sample 5 UpDown
  • Sample 6 UpDown
  • Sample 7 UpDown

Puede usar insertAfter () y buscar la secuencia / manipular la secuencia

En tu función deberías hacer algo como

 var previousObject = $(this).prev('li'); $(this).insertBefore(previousObject); var nextObject = $(this).next('li'); $(this).insertAfter(nextObject); 

no probado. Pero algo así debería funcionar. (este es el objeto de la lista cliqueada)

Aquí hay una solución vanisa de JS para su pregunta utilizando el marcado HTML provisto.

La solución utiliza el método .insertBefore() en el elemento primario

    para mover el elemento

  • seleccionado hacia arriba o hacia abajo.

  • elementos se seleccionan usando el objeto de evento para rastrear en qué botón se hizo clic.

    https://jsfiddle.net/termite82/ogenkkru/