From 505545aa8894528e2f9e88273c6bb31448261096 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Wed, 31 Jan 2024 19:38:39 +0800 Subject: [PATCH] =?UTF-8?q?11sortable.js=20ghostClass=20=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E5=81=9C=E9=9D=A0=E4=BD=8D=E7=BD=AE=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc.js | 2 +- ...able.js ghostClass 自定义停靠位置样式.html | 62 +++++++++++++++++++ temp.js | 22 +++++-- 3 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 11sortable.js ghostClass 自定义停靠位置样式.html diff --git a/.prettierrc.js b/.prettierrc.js index d17413e..8e9f5ad 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -4,7 +4,7 @@ module.exports = { // 超过最大值换行 printWidth: 130, // 缩进字节数 - tabWidth: 1, + tabWidth: 0, // 使用制表符而不是空格缩进行 useTabs: true, // 结尾不用分号(true有，false没有) diff --git a/11sortable.js ghostClass 自定义停靠位置样式.html b/11sortable.js ghostClass 自定义停靠位置样式.html new file mode 100644 index 0000000..c5d1a5f --- /dev/null +++ b/11sortable.js ghostClass 自定义停靠位置样式.html @@ -0,0 +1,62 @@ + + + + + sortable.js ghostClass属性例子 + + + + + +
+
+
ghostClass 停靠位置样式 太多下面元素看看
+
item 1
+
item 2
+
item 3
+
+
+
["1","2","3"]
+ + + diff --git a/temp.js b/temp.js index 46c146a..94ebb21 100644 --- 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); \ No newline at end of file