上下移动UI Li中的物品 [英] Move items in Ul Li up and down
本文介绍了上下移动UI Li中的物品的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个UI li,点击向上和向下按钮,我想要移动li元素上下移动。
这是在页面上呈现的html。
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.
我已经尝试了链接中提到的解决方案但是它可以使用jQuery来轻松地转换li元素吗?
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>
推荐答案
您可以尝试如下所示:
$('.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元素进行移动,请尝试这样的:('click',function(){
$('。liEllipsis')。
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);
}
};
https://jsfiddle.net/16sebrjq/1/
这篇关于上下移动UI Li中的物品的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文