上下移动UI Li中的物品
我有一个UI 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>
你可以尝试如下的东西：
$('.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/
看看这个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();
});
我刚刚从这里得到了这个例子
你可以试试这个
$(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>