From a5a61934a883b7083d0995b558458152e9cbe850 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Wed, 31 Jan 2024 16:07:08 +0800 Subject: [PATCH] =?UTF-8?q?05sortable.js=20delay=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E9=BC=A0=E6=A0=87=E6=8C=89=E4=B8=8B=E5=90=8E=E5=A4=9A=E4=B9=85?= =?UTF-8?q?=E6=89=8D=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 --- ....js delay属性鼠标按下后多久才允许拖动.html | 62 +++++++++++++ temp.js | 88 ++++--------------- 2 files changed, 80 insertions(+), 70 deletions(-) create mode 100644 05sortable.js delay属性鼠标按下后多久才允许拖动.html diff --git a/05sortable.js delay属性鼠标按下后多久才允许拖动.html b/05sortable.js delay属性鼠标按下后多久才允许拖动.html new file mode 100644 index 0000000..169c7b2 --- /dev/null +++ b/05sortable.js delay属性鼠标按下后多久才允许拖动.html @@ -0,0 +1,62 @@ + + + + + + sortable.js delay属性例子 + + + + + + +
+
+
点击按住鼠标1秒后再拖动
+
item 1
+
item 2
+
item 3
+
+
+
+ + + + \ No newline at end of file diff --git a/temp.js b/temp.js index ed2a34b..ccc029e 100644 --- a/temp.js +++ b/temp.js @@ -1,70 +1,18 @@ - //第一组 - var moveItemId = -1; - var g1 = document.getElementById('g1'); - var ops1 = { - animation: 166, - draggable: ".item", - sort: true, - group: { - name: "itxst.com", - pull: function () { - //第二个元素不允许被拖走 - if (moveItemId == '2') return false; - return 'clone'; - }, - put: function () { - //B组的google不允许被拖入 - if (moveItemId == '5') return false; - return true; - } - }, - //开始拖动记录下用户点击的那个元素 - onStart: function (evt) { - moveItemId = evt.clone.dataset.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 g2 = document.getElementById('g2'); - var ops2 = { - animation: 166, - draggable: ".item", - sort: false, - group: { name: "itxst.com", pull: true, put: true }, - //开始拖动记录下用户点击的那个元素 - onStart: function (evt) { - moveItemId = evt.clone.dataset.id; - }, - //拖动结束 - onEnd: function (evt) { - console.log(evt); - //获取拖动后的排序 - var arr = sortable2.toArray(); - document.getElementById("msg").innerHTML = "B组排序结果：" + JSON.stringify(arr); - }, - }; - var sortable2 = Sortable.create(g2, ops2); - - //第三组 - var g3 = document.getElementById('g3'); - var ops3 = { - animation: 166, - draggable: ".item", - group: { name: "itxst.com", pull: true, put: true }, - //拖动结束 - onEnd: function (evt) { - console.log(evt); - //获取拖动后的排序 - var arr = sortable3.toArray(); - document.getElementById("msg").innerHTML = "C组排序结果：" + JSON.stringify(arr); - }, - }; - var sortable3 = Sortable.create(g3, ops3); \ No newline at end of file + //第一组 + var g1 = document.getElementById('g1'); + var ops1 = { + animation: 1000, + draggable: ".item", + delay: 1000, + //拖动结束 + onEnd: function (evt) { + console.log(evt); + //获取拖动后的排序 + var arr = sortable1.toArray(); + document.getElementById("msg").innerHTML = "A组排序结果：" + JSON.stringify(arr); + }, + }; + function del() { + alert("执行了del事件") + } + var sortable1 = Sortable.create(g1, ops1); \ No newline at end of file