From e8fc5a4b448a571e24b173237d2ad23758715186 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Wed, 31 Jan 2024 16:56:26 +0800 Subject: [PATCH] =?UTF-8?q?10sortable.js=20dataIdAttr=20=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E6=8E=92=E5=BA=8F=E5=90=8E=E7=9A=84=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...rtable.js dataIdAttr 获取排序后的数据.html | 64 +++++++++++++++++++ temp.js | 29 ++++----- 2 files changed, 77 insertions(+), 16 deletions(-) create mode 100644 10sortable.js dataIdAttr 获取排序后的数据.html diff --git a/10sortable.js dataIdAttr 获取排序后的数据.html b/10sortable.js dataIdAttr 获取排序后的数据.html new file mode 100644 index 0000000..7be8c2c --- /dev/null +++ b/10sortable.js dataIdAttr 获取排序后的数据.html @@ -0,0 +1,64 @@ + + + + + + sortable.js dataIdAttr属性例子 + + + + + + +
+
+
dataIdAttr设置dataId属性
+
item 1
+
item 2
+
item 3
+
+
+
+ + + + \ No newline at end of file diff --git a/temp.js b/temp.js index 3b4876d..142bca4 100644 --- a/temp.js +++ b/temp.js @@ -1,19 +1,16 @@ var g1 = document.getElementById('g1'); var ops1 = { - animation: 1000, - delay: 30, - draggable: '.item', - //被禁止拖动的元素,第二个元素不允许被拖动 - filter: function (evt, item) { - if (item.dataset.id == '2') return true; - return false; - }, - //拖动结束 - onEnd: function (evt) { - console.log(evt); - //获取拖动后的排序 - var arr = sortable1.toArray(); - document.getElementById('msg').innerHTML = 'A组排序结果：' + JSON.stringify(arr); - }, + 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); +var sortable1 = Sortable.create(g1, ops1); \ No newline at end of file