欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

单行移动拖拽

程序员文章站 2022-06-28 19:11:04
jQuery网格布局图片拖动排序代码
<!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)

本文地址:https://blog.csdn.net/small_animation/article/details/109240113