单行移动拖拽
程序员文章站
2022-03-22 10:13:39
<!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