11sortable.js ghostClass 自定义停靠位置样式

2024-01-31 19:38:39 +08:00 · 2024-01-31 19:38:39 +08:00 · 505545aa88
parent 44bac47978
commit 505545aa88
3 changed files with 81 additions and 5 deletions
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -4,7 +4,7 @@ module.exports = {
 	// 超过最大值换行
 	printWidth: 130,
 	// 缩进字节数
-	tabWidth: 1,
+	tabWidth: 0,
 	// 使用制表符而不是空格缩进行
 	useTabs: true,
 	// 结尾不用分号(true有，false没有)
--- a/自定义停靠位置样式.html
+++ b/自定义停靠位置样式.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>sortable.js ghostClass属性例子</title>
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"
+		/>
+		<script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
+		<style>
+			.itxst {
+				margin: 10px;
+				width: 80%;
+				float: left;
+				margin-right: 10px;
+			}
+			.itxst div {
+				padding: 6px;
+				border: solid 1px #eee;
+				margin-bottom: 10px;
+				cursor: move;
+			}
+
+			#msg {
+				clear: both;
+				width: 100%;
+			}
+			.ghost {
+				background-color: #6fc77d;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box">
+			<div id="g1" class="itxst">
+				<div>ghostClass 停靠位置样式 太多下面元素看看</div>
+				<div class="item" data-no="1">item 1</div>
+				<div class="item" data-no="2">item 2</div>
+				<div class="item" data-no="3">item 3</div>
+			</div>
+		</div>
+		<div id="msg">["1","2","3"]</div>
+		<script>
+			const g1 = document.getElementById('g1');
+			const msg = document.getElementById('msg');
+
+			const ops = {
+				animation: 166,
+				draggable: '.item',
+				dataIdAttr: 'data-no',
+				ghostClass: 'ghost',
+				onEnd() {
+					const arr = sortable.toArray();
+					msg.innerHTML = JSON.stringify(arr);
+				},
+			};
+
+			const sortable = Sortable.create(g1, ops);
+		</script>
+	</body>
+</html>
--- a/temp.js
+++ b/temp.js
@ -1,4 +1,18 @@
-// https://www.itxst.com/sortablejs/f67ney22.html
-// https://www.itxst.com/sortablejs/mbe73qrv.html
-// https://www.itxst.com/sortablejs/i6vfuyfz.html
-// https://www.itxst.com/sortablejs/amb3yrae.html
+var g1 = document.getElementById('g1');
+var ops1 = {
+    animation: 166,
+    //指定可以拖动的元素
+    draggable: '.item',
+    //拖动后的数据
+    dataIdAttr: 'data-no',
+    //************* 停靠位置样式 **********
+    ghostClass: 'ghost',
+    //获取拖动结束的数据
+    onEnd: function (evt) {
+        console.log(evt);
+        //获取拖动后的排序
+        var arr = sortable1.toArray();
+        document.getElementById('msg').innerHTML = 'A组排序结果：' + JSON.stringify(arr);
+    },
+};
+var sortable1 = Sortable.create(g1, ops1);