From 2ece58e638d9232c77a169c5680497c278de4079 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Wed, 31 Jan 2024 16:28:42 +0800 Subject: [PATCH] =?UTF-8?q?07sortable.js=20handle=20=E6=8C=87=E5=AE=9A?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=8F=A5=E6=9F=84=E6=89=8D=E8=83=BD=E6=8B=96?= =?UTF-8?q?=E5=8A=A8=E7=88=B6=E5=85=83=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ....js handle 指定拖拽句柄才能拖动父元素.html | 79 +++++++++++++++++++ temp.js | 36 ++++----- 2 files changed, 95 insertions(+), 20 deletions(-) create mode 100644 07sortable.js handle 指定拖拽句柄才能拖动父元素.html diff --git a/07sortable.js handle 指定拖拽句柄才能拖动父元素.html b/07sortable.js handle 指定拖拽句柄才能拖动父元素.html new file mode 100644 index 0000000..d9ca02e --- /dev/null +++ b/07sortable.js handle 指定拖拽句柄才能拖动父元素.html @@ -0,0 +1,79 @@ + + + + + + sortable.js handle属性例子 + + + + + + +
+
handle:".move" 点击A区域才能拖动
+
+
+
A
+
item 1
+
+
+
A
+
item 2
+
+
+
A
+
item 3
+
+
+
+
+ + + + \ No newline at end of file diff --git a/temp.js b/temp.js index cc199ca..76e859b 100644 --- a/temp.js +++ b/temp.js @@ -1,20 +1,16 @@ - //第一组 - var g1 = document.getElementById('g1'); - var ops1 = { - animation: 1000, - draggable: ".item", - delay: 1000, - delayOnTouchOnly:true, - //拖动结束 - onEnd: function (evt) { - //可在浏览器中按F12查看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 +var ops1 = { + animation: 1000, + draggable: '.item', + handle: '.move', + //拖动结束 + onEnd: function (evt) { + console.log(evt); + //获取拖动后的排序 + var arr = sortable.toArray(); + document.getElementById('msg').innerHTML = 'A组排序结果：' + JSON.stringify(arr); + }, +}; +function del() { + console.log('执行了del事件'); +} +var sortable = Sortable.create(g1, ops1);