From e04e77f383afdba2e6d721e77d8e4cc33d7b3728 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Wed, 31 Jan 2024 20:16:25 +0800 Subject: [PATCH] =?UTF-8?q?13sortable.js=20dragClass=20=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E5=AF=B9=E8=B1=A1=E7=A7=BB=E5=8A=A8=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 13sortable.js dragClass 拖拽对象移动样式.html | 80 +++++++++++++++++++ temp.js | 25 +++--- 2 files changed, 96 insertions(+), 9 deletions(-) create mode 100644 13sortable.js dragClass 拖拽对象移动样式.html diff --git a/13sortable.js dragClass 拖拽对象移动样式.html b/13sortable.js dragClass 拖拽对象移动样式.html new file mode 100644 index 0000000..28af340 --- /dev/null +++ b/13sortable.js dragClass 拖拽对象移动样式.html @@ -0,0 +1,80 @@ + + + + + sortable.js dragClass属性例子 + + + + + +
+
+
dragClass 拖动对象的样式
+
item 1
+
item 2
+
item 3
+
+
+
+ + + diff --git a/temp.js b/temp.js index 7927125..6447954 100644 --- a/temp.js +++ b/temp.js @@ -1,16 +1,23 @@ -//获取对象 -var el = document.getElementById('itxst'); -//设置配置 -var ops = { +//第一组 +var g1 = document.getElementById('g1'); +var ops1 = { animation: 1000, + //指定可以拖动的元素 draggable: '.item', - //拖动结束 + //拖动后的数据 + dataIdAttr: 'data-no', + //停靠位置样式 + ghostClass: 'ghost', + //************* 拖动对象移动样式 + dragClass: 'drag', + //************* 禁用html5原生拖拽行为 + forceFallback: true, + //获取拖动结束的数据 onEnd: function (evt) { console.log(evt); //获取拖动后的排序 - var arr = sortable.toArray(); - alert(JSON.stringify(arr)); + var arr = sortable1.toArray(); + document.getElementById('msg').innerHTML = 'A组排序结果：' + JSON.stringify(arr); }, }; -//初始化 -var sortable = Sortable.create(el, ops); +var sortable1 = Sortable.create(g1, ops1);