使用Jquery和bootstrap实现上移、下移、置顶、至底部等功能

2024年04月02日 前端 JS JavaScript jq jquery 共享博客


最近休息了两个月，中途考了驾照，成功拿到驾照。

这几天刚换了家工作，主要做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://so.lmcjl.com/news/972/

展开阅读全文
上一篇：MySQL出现1171错误如何解决？ 下一篇：WordPress上传媒体文件自动重命名的代码分享
相关内容
1.css防止图片变形 object-fit: cover; 属性介绍
2.VUE中实现点击打印功能 vue网页打印 vue-easy-print
3.（安卓/IOS）APP调用H5事件，H5调用APP事件
4.elementui多选上传 before-upload 格式效验错误总会触发before-remove （el
5.vue按钮限制连点封装 自定义指令限制连点
6.nvm常用命令有哪些？nvm如何切换node版本？nvm如何下载node？
7.使用HBuilderX将vue或H5项目打包app
8.小程序嵌入网页向小程序跳转并传参，微信小程序中实现公众号授权获取openId
9.js替换字符串某个字符，js修改字符串中指定字符
10.uniapp中text-indent不起作用，uniapp首行缩进不管用如何解决？
11.elemtnui 表格如何修改某行文字颜色
12.vue中调用百度地图 获取经纬度
13.uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能（CSS实现语音音阶动画效果）
14.object-fit:cover;在小程序中不起作用，小程序图片变形了如何处理
15.js正则过滤金额输入时限制只能输入数字与1个小数点，且0开头第二位则不能为0
16.uniapp中使用uQRCode生成二维码功能
17.css数字/字母换行没生效，怎么解决？
18.js截取字符串前几位或者截取字符串后几位
19.Css3扩展小知识 c3蒙版 c3倒影 hsla模式等语法介绍
20.jq实现回车搜索事件功能 jq如何来判断input光标是否获取焦点或失去焦点
21.什么是模块化开发？
22.如何修改Mint-UI的默认样式 并且不影响其他页面
23.iView 日期时间选择器设置开始时间至结束时间限制
24.纯html+css固定表格一列或多列，其余进行横向滚动的方法
25.使用c3动画实现摇铃铛效果
26.使用css选择器实现表格隔行换色
27.CodePen的详细使用教程 codepen如何存放自己的代码
28.vue中实现禁止浏览器滚动方法
29.移动端点击a标签后默认蓝色背景如何去除
30.tp-watermark.js网页添加水印插件