From 6d928642dabd5b3216a3dbc5538ff8e81b3ca76b Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Wed, 31 Jan 2024 19:39:42 +0800 Subject: [PATCH] =?UTF-8?q?sortable.js=20draggable=20=E6=8C=87=E5=AE=9A?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=B1=BB=E7=9A=84=E5=85=83=E7=B4=A0=E6=89=8D?= =?UTF-8?q?=E5=85=81=E8=AE=B8=E6=8B=96=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ... draggable 指定样式类的元素才允许拖动.html | 51 +++++++++++++++++++ temp.js | 32 ++++++------ 2 files changed, 66 insertions(+), 17 deletions(-) create mode 100644 12sortable.js draggable 指定样式类的元素才允许拖动.html diff --git a/12sortable.js draggable 指定样式类的元素才允许拖动.html b/12sortable.js draggable 指定样式类的元素才允许拖动.html new file mode 100644 index 0000000..7e2743c --- /dev/null +++ b/12sortable.js draggable 指定样式类的元素才允许拖动.html @@ -0,0 +1,51 @@ + + + + + sortable.js draggable属性例子 + + + + + +
+
item 1
+
item 2(此元素未设置class="item" 所以无法拖动)
+
item 3
+
+ + + diff --git a/temp.js b/temp.js index 94ebb21..7927125 100644 --- a/temp.js +++ b/temp.js @@ -1,18 +1,16 @@ -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 el = document.getElementById('itxst'); +//设置配置 +var ops = { + animation: 1000, + draggable: '.item', + //拖动结束 + onEnd: function (evt) { + console.log(evt); + //获取拖动后的排序 + var arr = sortable.toArray(); + alert(JSON.stringify(arr)); + }, }; -var sortable1 = Sortable.create(g1, ops1); \ No newline at end of file +//初始化 +var sortable = Sortable.create(el, ops);