Move items in Ul Li up and down

Question

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 mentioned in the link Can I use jQuery to easily shift li elements up or down? but it didn't work for me.

      <ul id="ul_li_SubCategories" style="width:200px;" class="chargeCapturetable margin0">
    <li sequence="1" title="Category 1" class="liEllipsis" value="9"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 1</a></li>
    <li sequence="2" title="Category 3" class="liEllipsis" value="11"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 3</a></li>
    <li sequence="4" title="Category 4" class="liEllipsis" value="12"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 4</a></li>
    <li sequence="5" title="Category 6" class="liEllipsis" value="22"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 6</a></li>
    <li sequence="6" title="Category 5" class="liEllipsis" value="13"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 5</a></li>
    <li sequence="7" title="Category 7" class="liEllipsis" value="55"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 7</a></li>
<li sequence="99999" title="Category 8" class="liEllipsis" value="62"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 8</a></li></ul>

possible duplicate of [Can I use jQuery to easily shift li elements up or down?](http://stackoverflow.com/questions/1485138/can-i-use-jquery-to-easily-shift-li-elements-up-or-down) — TheBalco, Jun 25 '15 at 09:49
possible duplicate of http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element — Arathi Sreekumar, Jun 25 '15 at 09:57
I posted an answer with a working code, just call `yourElement.moveUp()` or `yourElement.moveDown()` to move it up or down — TheBalco, Jun 25 '15 at 09:59
Why was this question down voted? Its quite legitimate quesiton I suppose. — Gaurav Sachdeva, Jun 25 '15 at 10:55

score 3 · Answer 1 · edited May 23 '17 at 11:54

3

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

edited May 23 '17 at 11:54

Community

1
1

answered Jun 25 '15 at 09:55

TheBalco

395
1
3
25

Arathi Sreekumar · Accepted Answer · 2015-06-25T10:44:44.513

3

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/

edited Jun 25 '15 at 10:44

answered Jun 25 '15 at 09:56

Arathi Sreekumar

2,544
1
17
28

I think since the event is happening on button click.. Wouldn't "this" refer to the button in this case. – Gaurav Sachdeva Jun 25 '15 at 10:02
Yes. This is assuming your buttons are inside the li, hence I am looking for the closest li, and moving it. – Arathi Sreekumar Jun 25 '15 at 10:08
No.. The button is not placed in the same li. Its in a different div altogether. @Arathi Sreekumar – Gaurav Sachdeva Jun 25 '15 at 10:10
I have attached a jsfiddle, you can replace my up button and down button with your icon up/down classes. If it isnt inside then please provide a jsfiddle with what you are trying to achieve. – Arathi Sreekumar Jun 25 '15 at 10:14
That wont work again.. My button are in a differenct div.. So I guess I will not be able to find closest .liEllipsis class. – Gaurav Sachdeva Jun 25 '15 at 10:19
How would you know which button moves which li, if your buttons are separate from the li elements? could you provide a code with your buttons in it? – Arathi Sreekumar Jun 25 '15 at 10:20
One thing that I can think of is find out the select value in Li using the id of ul... Then on button click find the previous ornext item. – Gaurav Sachdeva Jun 25 '15 at 10:30
You may need to re-phrase your question and by up or down button do you mean keyboard arrow keys? – Arathi Sreekumar Jun 25 '15 at 10:35
No. I got it working.. Here is what I tried. var elementToMove = $('#ul_li_SubCategories li.selSubCategories'); var elementBefore = $(elementToMove).prev('li'); $(elementToMove).insertBefore($(elementBefore)); Thanks for your help though.. :) – Gaurav Sachdeva Jun 25 '15 at 10:44
Cool, cheers then, I had added a new jsfiddle with a similar solution. – Arathi Sreekumar Jun 25 '15 at 10:46

Anto S · Answer 3 · 2015-06-25T11:24:30.150

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

})

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

score 1 · Answer 4 · answered Apr 25 '18 at 14:35

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/

Kbi · Answer 5 · 2015-06-25T09:56:15.760

0

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)

edited Jun 25 '15 at 09:56

answered Jun 25 '15 at 09:44

Kbi

384
2
16

Move items in Ul Li up and down

5 Answers5

Linked