diff --git a/15sortable.js onChoose 选中事件.html b/15sortable.js onChoose 选中事件.html new file mode 100644 index 0000000..93db23d --- /dev/null +++ b/15sortable.js onChoose 选中事件.html @@ -0,0 +1,129 @@ + + + + + + sortable.js onChoose事件例子 + + + + + + +
+
+
item 1
+
item 2
+
item 3
+
+
+
item 1
+
item 2
+
item 3
+
+
+
+ + + + \ No newline at end of file diff --git a/temp.js b/temp.js index 99d8081..4829cd3 100644 --- a/temp.js +++ b/temp.js @@ -1,21 +1,56 @@ -var g1 = document.getElementById('g1'); -var ops1 = { +const msg = document.getElementById("msg"); +//第一组 +const g1 = document.getElementById("g1"); +const ops = { animation: 1000, - delay: 1000, + delay: 1, + // 拖拽的元素 + draggable: ".item", + // 选中的样式 + chosenClass: "chosen", + //停靠位置样式 + ghostClass: 'ghost', + forceFallback: true, + group: { name: 'itxst.com', pull: "clone", put: true }, + // ******** 选中执行的方法 ******** + onChoose(event) { + const index = event.oldIndex + msg.innerHTML = `选中了第${arr1[index]}` + }, + // ******** 拖动结束 ******** + onEnd(event) { + console.log(JSON.stringify(arr1)); + } +} + +const sortable = Sortable.create(g1, ops) +// 获取数据 +const arr1 = sortable.toArray() + +// 第二组 +const g2 = document.getElementById("g2") +const ops2 = { + animation: 166, + delay: 1, 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); + group: { name: 'itxst.com', pull: "clone", put: true }, + //*********** 选中后执行的方法 *********** + onChoose: function (event) { + const index = event.oldIndex + msg.innerHTML = '你选中了第' + arr2[index] + '元素'; }, -}; -var sortable1 = Sortable.create(g1, ops1); \ No newline at end of file + //拖动结束 + onEnd: function (event) { + //获取拖动后的排序 + console.log(JSON.stringify(arr2)); + }, +} + +const sortable2 = Sortable.create(g2, ops2) +const arr2 = sortable2.toArray() \ No newline at end of file