启用dropOrSwap插件后group失效，两个列表配置不同的group名也能互相拖拽 #157
Description
<script setup lang="ts">
import { ref } from "vue";
import { dropOrSwap } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
const todoItems = [
"Schedule perm",
"Rewind VHS tapes",
"Make change for the arcade",
"Get disposable camera developed",
"Learn C++",
"Return Nintendo Power Glove",
];
const doneItems = ["Pickup new mix-tape from Beth"];
const todoShouldSwap = ref(false);
const doneShouldSwap = ref(false);
const [todoList, todos] = useDragAndDrop(todoItems, {
group: "todoList",
plugins: [
dropOrSwap({
shouldSwap: () => todoShouldSwap.value,
}),
],
});
const [doneList, dones] = useDragAndDrop(doneItems, {
group: "todoListA",
plugins: [
dropOrSwap({
shouldSwap: () => doneShouldSwap.value,
}),
],
});
function toggleTodoSwap() {
todoShouldSwap.value = !todoShouldSwap.value;
}
function toggleDoneSwap() {
doneShouldSwap.value = !doneShouldSwap.value;
}
</script>
- {{ todo }}
Toggle {{ todoShouldSwap ? "Drop" : "Swap" }}
- {{ done }}
Toggle {{ doneShouldSwap ? "Drop" : "Swap" }}