10sortable.js dataIdAttr 获取排序后的数据

2024-01-31 19:29:37 +08:00 · 2024-01-31 19:29:37 +08:00 · 44bac47978
parent e8fc5a4b44
commit 44bac47978
3 changed files with 101 additions and 74 deletions
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,39 @@
+// @see: https://www.prettier.cn
+
+module.exports = {
+	// 超过最大值换行
+	printWidth: 130,
+	// 缩进字节数
+	tabWidth: 1,
+	// 使用制表符而不是空格缩进行
+	useTabs: true,
+	// 结尾不用分号(true有，false没有)
+	semi: true,
+	// 使用单引号(true单引号，false双引号)
+	singleQuote: true,
+	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+	quoteProps: 'as-needed',
+	// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
+	bracketSpacing: true,
+	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
+	trailingComma: 'all',
+	// 在JSX中使用单引号而不是双引号
+	jsxSingleQuote: true,
+	//  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
+	arrowParens: 'avoid',
+	// 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
+	insertPragma: false,
+	// 指定要使用的解析器，不需要写文件开头的 @prettier
+	requirePragma: false,
+	// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+	proseWrap: 'preserve',
+	// 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
+	htmlWhitespaceSensitivity: 'css',
+	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+	endOfLine: 'auto',
+	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+	rangeStart: 0,
+	rangeEnd: Infinity,
+
+	vueIndentScriptAndStyle: false, // Vue文件脚本和样式标签缩进
+};
--- a/获取排序后的数据.html
+++ b/获取排序后的数据.html
@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html>
-
 	<head>
 		<meta charset="utf-8" />
 		<title>sortable.js dataIdAttr属性例子</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">
+		<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 {
@ -49,16 +50,15 @@
 			const g1 = document.getElementById('g1');
 			const ops1 = {
 				animation: 166,
-            draggable: ".item",
-            dataIdAttr: "data-id",
+				draggable: '.item',
+				dataIdAttr: 'data-id',
 				inEnd(evnt) {
-                console.log(evnt)
-                const arr = sortable.toArray()
-                console.log(arr)
-            }
+					console.log(evnt);
+					const arr = sortable.toArray();
+					console.log(arr);
+				},
 			};
 			const sortable1 = Sortable.create(g1, ops1);
 		</script>
 	</body>
-
 </html>
--- a/temp.js
+++ b/temp.js
@ -1,16 +1,4 @@
-var g1 = document.getElementById('g1');
-var ops1 = {
-    animation: 1000,
-    //指定可以拖动的元素
-    draggable: ".item",
-    //************* 拖动后的数据 **********
-    dataIdAttr: "data-id",
-    //************* 获取拖动结束的数据 **********
-    onEnd: function (evt) {
-        console.log(evt);
-        //获取拖动后的排序
-        var arr = sortable1.toArray();
-        document.getElementById("msg").innerHTML = "A组排序结果：" + JSON.stringify(arr);
-    },
-};
-var sortable1 = Sortable.create(g1, ops1);
+// 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