Alfred-Skyblue / vue-draggable-plus

Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2
https://vue-draggable-plus.pages.dev/en/
MIT License
2.74k stars 106 forks source link

onMove生命周期中,return false无法取消拖拽 #5

Closed wlxuqu closed 1 year ago

wlxuqu commented 1 year ago

如下代码,可以直接运行,在onMove事件中,返回false,无法阻止(取消)拖拽,望修复,感谢!

<template>
    <div class="flex">
        <VueDraggable ref="el" v-model="list" animation="150" ghostClass="ghost"
            class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded" :onMove="onMove">
            <div v-for="item in list" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3 cursor-move">
                {{ item.name }}
            </div>
        </VueDraggable>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
const list = ref([
    {
        name: 'Joao',
        id: 1
    },
    {
        name: 'Jean',
        id: 2
    },
    {
        name: 'Johanna',
        id: 3
    },
    {
        name: 'Juan',
        id: 4
    }
])

const onMove = () => {
    return false
}
</script>

<style scoped>
.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}
</style>
Alfred-Skyblue commented 1 year ago

Thank you for your proposal, I have fixed it in the latest version, you can install version 0.1.3 for use.

wlxuqu commented 1 year ago

Thank you for your proposal, I have fixed it in the latest version, you can install version 0.1.3 for use.

感谢你的快速响应,更新版本已可用,祝越来越好