使用Jquery和bootstrap实现上移、下移、置顶、至底部等功能
最近休息了两个月，中途考了驾照，成功拿到驾照。
这几天刚换了家工作，主要做PC端，然后遇到了这个效果，就分享给大家咯！
一个使用jq和bootstrap实现的上下移动置顶的效果，如上图所示
附demo
下载地址：点击下载
需自行引入 jq和bootstrap 的js与css，demo里面已整理，可自行下载demo查看
代码如下（代码我从项目中复制粘贴过来，可能多一些没有用的，自行删除修改）：
.wrapper{
width: 100%;
height: 100%;
background: #000;
}
.bottom-pop-up{
width: 640px;
max-height: 494px;
background: #f8f8f8;
border-radius: 4px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -320px;
margin-top: -247px;
}
.bottom-pop-up-center{
width: 100%;
}
.bottom-pop-up-menu{
width: 100%;
background: #f1f2f6;
display: flex;
padding: 0 30px;
}
.bottom-pop-up-menu p{
font-size: 14px;
color: #6971a0;
line-height: 52px;
display: block;
width: 25%;
}
.bottom-pop-up-list{
overflow-y: scroll;
height: 300px;
background: #fff;
}
.bottom-pop-up-list .table-bordered{
border: 0;
}
.bottom-pop-up-list tr{
border-bottom: 1px solid #f3f3f5;
display: flex;
padding: 0 30px;
}
.bottom-pop-up-list tr td{
border: none !important;
width: 25%;
padding: 0 !important;
line-height: 50px !important;
}
.bottom-pop-up-show .iconright{
color: #00cf24;
cursor: pointer;
}
.bottom-pop-up-show .iconerror{
color: #ff4540;
cursor: pointer;
}
.bottom-pop-up-order .iconfont{
color: #716f70;
font-weight: bold;
border: none;
padding: 0 15px 0 0;
cursor: pointer;
}
.bottom-pop-up-operation .iconfont{
color: #aaadb2;
border: none;
padding: 0 15px 0 0;
cursor: pointer;
}
.bottom-pop-up-order .btn-primary{
background-color: transparent;
border-color: transparent;
}<body>
<div class="wrapper">
<div class="bottom-pop-up" id="BottomPopUp">
<div class="bottom-pop-up-center">
<div class="bottom-pop-up-menu public-flex">
<p>栏目</p>
<p>显示</p>
<p>排序</p>
<p>操作</p>
</div>
<div class="bottom-pop-up-list">
<table class="table table-bordered comTable table1">
<tr>
<td>
留言板
<input type="text" name="city[]" value="11001" hidden>
</td>
<!-- 显示 -->
<td class="bottom-pop-up-show">
<span class="iconfont iconright"></span>
<input type="text" name="city[]" value="11001" hidden>
</td>
<!-- 顺序 置顶、上移、下移、置低 -->
<td class="bottom-pop-up-order">
<span class="iconfont iconhighest btn top"></span>
<span class="iconfont iconhigh btn up"></span>
<span class="iconfont iconlow btn down"></span>
<span class="iconfont iconlowest btn stick"></span>
</td>
<!-- 顺序 编辑、添加、删除 -->
<td class="bottom-pop-up-operation">
<span class="iconfont iconedit"></span>
<span class="iconfont iconaddEdge"></span>
<span class="iconfont icondelete del"></span>
<input type="text" name="city[]" value="11001" hidden>
</td>
</tr>
<tr>
<td>
首页
<input type="text" name="city[]" value="11002" hidden>
</td>
<!-- 显示 -->
<td class="bottom-pop-up-show">
<span class="iconfont iconerror"></span>
<input type="text" name="city[]" value="11002" hidden>
</td>
<!-- 顺序 置顶、上移、下移、置低 -->
<td class="bottom-pop-up-order">
<span class="iconfont iconhighest btn top"></span>
<span class="iconfont iconhigh btn up"></span>
<span class="iconfont iconlow btn down"></span>
<span class="iconfont iconlowest btn stick"></span>
</td>
<!-- 顺序 编辑、添加、删除 -->
<td class="bottom-pop-up-operation">
<span class="iconfont iconedit"></span>
<span class="iconfont iconaddEdge"></span>
<span class="iconfont icondelete del"></span>
<input type="text" name="city[]" value="11002" hidden>
</td>
</tr>
<tr>
<td>
关于我们
<input type="text" name="city[]" value="11003" hidden>
</td>
<!-- 显示 -->
<td class="bottom-pop-up-show">
<span class="iconfont iconerror"></span>
<input type="text" name="city[]" value="11003" hidden>
</td>
<!-- 顺序 置顶、上移、下移、置低 -->
<td class="bottom-pop-up-order">
<span class="iconfont iconhighest btn top"></span>
<span class="iconfont iconhigh btn up"></span>
<span class="iconfont iconlow btn down"></span>
<span class="iconfont iconlowest btn stick"></span>
</td>
<!-- 顺序 编辑、添加、删除 -->
<td class="bottom-pop-up-operation">
<span class="iconfont iconedit"></span>
<span class="iconfont iconaddEdge"></span>
<span class="iconfont icondelete del"></span>
<input type="text" name="city[]" value="11003" hidden>
</td>
</tr>
<tr>
<td>
联系我们
<input type="text" name="city[]" value="11004" hidden>
</td>
<!-- 显示 -->
<td class="bottom-pop-up-show">
<span class="iconfont iconright"></span>
<input type="text" name="city[]" value="11004" hidden>
</td>
<!-- 顺序 置顶、上移、下移、置低 -->
<td class="bottom-pop-up-order">
<span class="iconfont iconhighest btn top"></span>
<span class="iconfont iconhigh btn up"></span>
<span class="iconfont iconlow btn down"></span>
<span class="iconfont iconlowest btn stick"></span>
</td>
<!-- 顺序 编辑、添加、删除 -->
<td class="bottom-pop-up-operation">
<span class="iconfont iconedit"></span>
<span class="iconfont iconaddEdge"></span>
<span class="iconfont icondelete del"></span>
<input type="text" name="city[]" value="11004" hidden>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body><script>
//上下移动、置顶、置底操作
$(function(){
//上移
var $up = $(".up");
$up.click(function() {
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.fadeOut().fadeIn();
$tr.prev().before($tr);
}
});
//下移
var $down = $(".down");
var len = $down.length;
$down.click(function() {
var $tr = $(this).parents("tr");
if ($tr.index() != len - 1) {
$tr.fadeOut().fadeIn();
$tr.next().after($tr);
}
});
//置顶
var $top = $(".top");
$top.click(function(){
var $tr = $(this).parents("tr");
$tr.fadeOut().fadeIn();
$(".table1").prepend($tr);
$tr.css("color","red");
});
//置底
var $stick = $(".stick");
$stick.click(function(){
var $tr = $(this).parents("tr");
$tr.fadeOut().fadeIn();
$(".table1").append($tr);
$tr.css("color","red");
});
//删除
var $del = $(".del");
$del.click(function(){
$(this).parents("tr").remove();
});
//隐藏/隐藏
var $iconerror = $(".iconerror");
$iconerror.click(function(){
if ($(this).hasClass('iconerror')) {
$(this).removeClass('iconerror');
$(this).addClass('iconright')
} else {
$(this).removeClass('iconright');
$(this).addClass('iconerror')
}
});
var $iconright = $(".iconright");
$iconright.click(function(){
if ($(this).hasClass('iconright')) {
$(this).removeClass('iconright');
$(this).addClass('iconerror')
} else {
$(this).removeClass('iconerror');
$(this).addClass('iconright')
}
});
});
</script>个人博客 http://www.sharedblog.cn/?post=198
个人微信小程序（多多支持）
浙公网安备 33010602011771号