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

看看这个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 2

您可以尝试以下内容：

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

<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

您可以使用insertAfter（）并查看for sequence /操作序列

在你的功能中，你应该做一些像

这样的事情

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


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

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

Answer 5

使用您提供的HTML标记，这是一个针对您的问题的vanilla JS解决方案。

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

通过使用事件对象来跟踪单击了哪个按钮，选择了

<li>个项目。

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

在Ul Li中上下移动物品

5 个答案: