上下移動Ul Li中的項目

Question

我有一個Ul li，然后單擊上下按鈕，我想移動以上下移動li元素。 這是頁面上呈現的html。

我已經嘗試了鏈接中提到的解決方案， 可以使用jQuery輕松地上下移動li元素嗎？ 但這對我沒有用。

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

我只是從這里得到的例子

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

你可以試試這個

 $(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（）並查找序列/操作序列

在您的職能中，您應該做類似

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


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

未經測試。 但是類似的事情應該起作用。 （這是單擊的列表對象）

Answer 5

這是使用您提供的HTML標記解決問題的常用JS解決方案。

該解決方案利用父<ul>上的.insertBefore()方法來上下移動所選的<li>元素。

通過使用事件對象跟蹤單擊哪個按鈕來選擇<li>項目。

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