app拖拽自由排列

最新推荐文章于 2024-06-04 16:16:05 发布

WebCsDn_TDCode

最新推荐文章于 2024-06-04 16:16:05 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： pc app 拖拽

本文链接：https://blog.csdn.net/qq_42396791/article/details/83307661

版权

前端专栏收录该内容

70 篇文章 0 订阅

订阅专栏

上次为大家分享关于PC端端的拖拽功能，相信还有更多网友需要移动端的拖拽

jQuery的拖动排序，DIV拖拽排序代码，实现了PC和应用程序的拖拽

这次为大家分享移动版拖拽

需要插件：

1.jquery.min.js

2.drag-arrange.js

废话不多说上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon bookmark" type="image/x-icon" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<style type="text/css">
		/*分类*/
		.container{
			padding: 10px;
			box-sizing: border-box;
		}
		.container .mainclassify {
			color: #333333;
		}
		.container .mainclassify .title{
			line-height: 44px;
		}
		.container .mainclassify .title span{
			color: #CCCCCC;
			margin-left: 10px;
		}
		.container .mainclassify .listgroup-item {
		    background-color: none;
		    border: none;
		    overflow: hidden;
		}
		.container .mainclassify .listgroup-item li{
		    float: left;
		    width: 25%;
		    height: auto;
		}
		.container .mainclassify .listgroup-item .item_list{
		    /*background-color:;*/
		    width: 90%;
		    height: 70px;
		    margin: 5px auto;
		    padding: 5px;
		    box-sizing: border-box;
		    font-size: 12px;
		    color: #333;
		    border-radius: 5px;
		    background-size: 70%;
		    background-position-y: 18px;
		}
	</style>
	<body>
		<main class="container">
			<div class="mainclassify">
				<p class="fz14 title">我的分类<span class="fz12">长按可拖动排序</span></p>
				<ul class="listgroup-item">
					<li class="draggable-element"><div class="item_list">推荐1</div></li>
					<li class="draggable-element"><div class="item_list">推荐2</div></li>
					<li class="draggable-element"><div class="item_list">推荐3</div></li>
					<li class="draggable-element"><div class="item_list">推荐4</div></li>
					<li class="draggable-element"><div class="item_list">推荐5</div></li>
					<li class="draggable-element"><div class="item_list">推荐6</div></li>
					<li class="draggable-element"><div class="item_list">推荐7</div></li>
					<li class="draggable-element"><div class="item_list">推荐8</div></li>
				</ul>				
			</div>
		</main>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="drag-arrange.js"></script>
	</body>
	<script type="text/javascript">
		  $(function() {
		      $('.draggable-element').arrangeable();
		  });
	</script>
</html>

完整代码和插件：地址请进入

WebCsDn_TDCode

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
app拖拽自由排列

上次为大家分享关于PC端端的拖拽功能，相信还有更多网友需要移动端的拖拽jQuery的拖动排序，DIV拖拽排序代码，实现了PC和应用程序的拖拽这次为大家分享移动版拖拽需要插件：1.jquery.min.js2.drag-arrange.js废话不多说上代码<!DOCTYPE html><html> <head> <met...
复制链接

扫一扫