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>
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
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);
}
};
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>
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)
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.