上下移动 Ul Li 中的项目

Question

我有一个 Ul li，单击向上和向下按钮时，我想移动以向上和向下移动 li 元素。 这是在页面上呈现的 html。

我已经尝试了链接 Can I use jQuery to easily shift li elements up or down? 中提到的解决方案，但它对我不起作用。

      <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>

Answer 1

您可以尝试以下方法：

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

如果您想使用外部按钮和选定的 li 元素移动，请尝试以下操作：

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

Answer 2

看看这个jsfiddle

使用这个 jQuery 代码，在这个例子中我只是将元素向下移动：

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

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

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

我刚刚从here得到示例

Answer 3

你可以试试这个

$(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>

Answer 4

这是一个使用您提供的 HTML 标记的原始 JS 解决方案。

该解决方案利用父<ul> 上的.insertBefore() 方法将选定的<li> 元素向上或向下移动。

<li> 项目是通过使用事件对象来跟踪单击了哪个按钮来选择的。

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

Answer 5

您可以使用 insertAfter() 并查找 for 序列/操作序列

在你的函数中你应该做类似的事情

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


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

未测试。但这样的事情应该有效。 （这是点击列表对象）