html拖动改变元素顺序,jQuery语法——移动节点，改变节点顺序

一、基础页面基础页面中是一个ul列表，我们以改变其中的红色

标签为例，演示如何使用jQuery改变元素节点的顺序。基础页面如下：

HTML代码：上移下移

• 我是一个普通的li标签
• 我是一个普通的li标签
• 我是一个普通的li标签
• 我是一个普通的li标签
• 我是一个普通的li标签
• 我是一个普通的li标签
• 我是一个普通的li标签
• 我是一个普通的li标签
• 我是一个普通的li标签
• 我是会动的li标签

CSS代码：button{    width: 100px;    height: 30px;    display: inline-block;    border-radius: 10px;    border: none;    background-color: #0d3349;    color: #fff;

}.move{    color: red;    font-weight: bolder;

}

二、向上移动元素节点$(function(){

$('.move-up').click(function(){        var cur_li = $('.move');        var prev_li = cur_li.prev();     // 获取当前节点的上一个节点

// 把当前节点插入到上一个节点之前，如果不存在上一个节点，说明已经到达顶部

if(prev_li.length != 0){

prev_li.before(cur_li);

}        else {

alert("元素已经到顶部!");

}

});

});

三、向下移动元素节点$(function(){

$('.move-down').click(function(){        var cur_li = $('.move');        var next_li = cur_li.next();     // 获取当前节点的下一个节点

// 把当前节点插入到下一个节点之后，如果不存在下一个节点，说明已经到达底部

if(next_li.length != 0){

next_li.after(cur_li);

}        else {

alert("元素节点已经到底部!");

}

});效果演示：

四、将元素移动到顶部/底部其实，将元素移动到顶部和底部是非常简单的。

移动到顶部：只需要获取当前ul中的第一个li标签，然后将该元素插入第一个标签之前即可完成。

移动到底部：获取当前ul中的最后一个li标签，然后将钙元素插入到最后一个标签之后即可完成。

示例代码：$(function () {    // 移动到顶部

$('.go-up').click(function () {        var cur_li = $('.move');        var first_li = $('.box li').eq(0);

first_li.before(cur_li);

});

// 移动到底部

$('.go-down').click(function () {        var cur_li = $('.move');        var last_li = $('.box li').last();

last_li.after(cur_li);

});

});效果展示：

作者：振礼硕晨

链接：https://www.jianshu.com/p/60bf41f513f8