php置顶代码,js上移、下移、置顶、置底功能实现思路及源码展示

实现页面上列表内容上移、下移、置顶、置底 功能，主要实现思路是节点操作，比如说：上移，直接把点击项移动到前一个节点，以此类推，当然实际代码实现还要加些判断，如当前点击操作项是否已经是置底或置底了，如果是则给点相应提示，好让操作者知道发生了什么事情。

具体源码，大伙来感受下：

源码示例：

.demo li{line-height: 30px;border-bottom: 1px solid #000;}

.demo li a{padding: 0 20px;}

• 001 上移下移置顶置底
• 002 上移下移置顶置底
• 003 上移下移置顶置底
• 004 上移下移置顶置底

$(".demo").on('click', 'a', function(event) {

event.preventDefault;

var parent=$(this).parent();

var parents=$(this).parents(".demo");

var len=parents.children().length;

if(($(this).is(".up") || $(this).is(".top")) && parent.index()==0){

alert("已经是置顶状态！");

return false;

}else if(($(this).is(".down") || $(this).is(".bottom")) && parent.index()==len-1){

alert("已经是置底状态！");

return false;

}

switch (true) {

case $(this).is(".up"):

var prev = parent.prev();

parent.insertBefore(prev);

break;

case $(this).is(".down"):

var next = parent.next();

parent.insertAfter(next);

break;

case $(this).is(".top"):

parents.prepend(parent);

break;

case $(this).is(".bottom"):

parents.append(parent);

break;

}

alert("操作完成！！");

});

提示：你可以先修改部分代码再运行。