Move Items In Ul Li Up And Down

I have a Ul li and on click of a Up and Down buttons I want to move to move the li elements up and down. Here is the html that is rendered on the page. I already tried the solution

Solution 1:

You can try something like the following:

$('.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/

If you want to move using a button outside, and a selected li element, try something like this:

$('.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/

Solution 2:

Look at this jsfiddle

Use this jQuery code, I just move elements down in this example:

$.fn.moveUp = function() {
    before = $(this).prev();
    $(this).insertBefore(before);
}

$.fn.moveDown = function() {
    after = $(this).next();
    $(this).insertAfter(after);
}

$('li').click(function() {
    $(this).moveDown();
});

I just got the example from here

Solution 3:

you can try this

$(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;
});

})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li>Sample 1 <spanclass="glyphicon-arrow-up">Up</span><spanclass="glyphicon-arrow-down">Down</span></li><li>Sample 2 <spanclass="glyphicon-arrow-up">Up</span><spanclass="glyphicon-arrow-down">Down</span></li><li>Sample 3 <spanclass="glyphicon-arrow-up">Up</span><spanclass="glyphicon-arrow-down">Down</span></li><li>Sample 4 <spanclass="glyphicon-arrow-up">Up</span><spanclass="glyphicon-arrow-down">Down</span></li><li>Sample 5 <spanclass="glyphicon-arrow-up">Up</span><spanclass="glyphicon-arrow-down">Down</span></li><li>Sample 6 <spanclass="glyphicon-arrow-up">Up</span><spanclass="glyphicon-arrow-down">Down</span></li><li>Sample 7 <spanclass="glyphicon-arrow-up">Up</span><spanclass="glyphicon-arrow-down">Down</span></li></ul>

Solution 4:

Here is a vanilla JS solution to your question using your supplied HTML markup.

The solution makes use of the .insertBefore() method on the parent <ul> to move the selected <li> element up or down.

<li> items are selected by using the event object to track which button was clicked.

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

Solution 5:

You can use insertAfter() and look the for sequence / manipulate the sequence

In your function you should do something like

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


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

not tested. But something like that should work. (this is the clicked list object)