单行移动拖拽

最新推荐文章于 2024-07-18 15:09:01 发布

small_animation

最新推荐文章于 2024-07-18 15:09:01 发布

阅读量121

点赞数

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

本文链接：https://blog.csdn.net/small_animation/article/details/109240113

版权

拖拽专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>jQuery网格布局图片拖动排序代码</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<style>
			ul,li {list-style-type: none;padding: 0;margin: 0;}
			.appointment_chart{overflow: auto;width: 100%;}
			.appointment_chart .chart_items{margin: 20px 0;height: 80px;overflow-y:hidden;overflow-x:auto;display: flex;align-items: center;}
			.appointment_chart .chart_items .car_number{background: red;width: 150px;height: 100%; display: flex;justify-content: center;align-items: center;-webkit-user-select: none;cursor: pointer;}
			.appointment_chart .chart_items .list_move{display: flex;width: 100%;}
			.appointment_chart .chart_items .list_move .items{width: 50px;text-align: center;}
			.appointment_chart .chart_items .list_move .items div{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
			.appointment_chart .chart_items .list_move .items{padding-top: 20px;height: 80px;box-sizing: border-box;}
			.appointment_chart .chart_items .list_move .items:nth-child(1){background: #f2711c}
			.appointment_chart .chart_items .list_move .items:nth-child(2){background: #3AA0FF}
			.appointment_chart .chart_items .list_move .items:nth-child(3){background: #975FE4}
	</style>
</head>
<body>
	<div class="appointment_chart">
		<div class="chart_list">
			<div class="chart_items">
				<div class="car_number">陕a</div>
				<ul class="list_move">
					<li class="items">
						<div>111111</div>
						<div>姓名1</div>
					</li>
					<li class="items">
						<div>222</div>
						<div>姓名2</div>
					</li>
				</ul>
			</div>
			<div class="chart_items">
				<div class="car_number">陕a</div>
				<ul class="list_move">
					<li class="items">
						<div>111111</div>
						<div>姓名1</div>
					</li>
					<li class="items">
						<div>222</div>
						<div>姓名2</div>
					</li>
				</ul>
			</div>

		</div>
	</div>

	<!-- 页面js -->
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
	<script type="text/javascript" src="js/jqDragsort-0.5.1.min.js"></script>
	<!-- jqDragsort.js另行下载 -->
	<script type="text/javascript">
		$(function() {
			var len = $(".chart_list .chart_items").length;
			console.log(len)
			try {
				for (let i = 0; i < len; i++) {
					$(`.chart_list .chart_items:nth-child(${i+1}) .list_move`).dragsort({
						dragSelector: ".items",
						dragBetween: true,
						dragEnd: function() {
							console.log('此处可放拖动结束后的方法。')
						}
					});
				}

			} catch (e) {}
		});
	</script>
</body>
</html>

[dragsort.js:]
(https://download.csdn.net/download/small_animation/13023946)

small_animation

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单行移动拖拽

<!DOCTYPE html><html lang="en"> <head> <title>jQuery网格布局图片拖动排序代码</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta content="text/html; charset=utf-8" http-equiv="
复制链接

扫一扫