From 2bd87cee7bfbf6d665f1bcb831acd4dc03253129 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Wed, 31 Jan 2024 20:23:37 +0800 Subject: [PATCH] =?UTF-8?q?14sortable.js=20chosenClass=20=E9=80=89?= =?UTF-8?q?=E4=B8=AD=E6=8B=96=E6=8B=BD=E5=AF=B9=E8=B1=A1=E7=9A=84=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...ble.js chosenClass 选中拖拽对象的样式.html | 88 +++++++++++++++++++ temp.js | 38 ++++---- 2 files changed, 106 insertions(+), 20 deletions(-) create mode 100644 14sortable.js chosenClass 选中拖拽对象的样式.html diff --git a/14sortable.js chosenClass 选中拖拽对象的样式.html b/14sortable.js chosenClass 选中拖拽对象的样式.html new file mode 100644 index 0000000..c1bc1f7 --- /dev/null +++ b/14sortable.js chosenClass 选中拖拽对象的样式.html @@ -0,0 +1,88 @@ + + + + + sortable.js chosenClass属性例子 + + + + + +
+
+
鼠标点击按住下面的 item 2对象1秒后再拖拽
+
item 1
+
item 2
+
item 3
+
+
+
+ + + diff --git a/temp.js b/temp.js index 6447954..99d8081 100644 --- a/temp.js +++ b/temp.js @@ -1,23 +1,21 @@ -//第一组 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 = sortable1.toArray(); - document.getElementById('msg').innerHTML = 'A组排序结果：' + JSON.stringify(arr); - }, + animation: 1000, + delay: 1000, + draggable: '.item', + //停靠位置样式 + ghostClass: 'ghost', + //************* 选中样式 *********** + chosenClass: 'chosen', + //禁用html5原生拖拽行为 + forceFallback: true, + group: { name: 'itxst.com', pull: true, put: true }, + //拖动结束 + 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