若依vue3项目中vuedragable拖拽导航面板应用

<draggable
    :list="state.list" //绑定的数据
    :group="groupA" //绑定拖拽规则
    ghost-class="ghost"
    chosen-class="chosenClass"
    animation="300" //动画延时
    @start="onStart" //点击拖拽开始事件
    @end="onEnd" //松开拖拽结束事件
>
    <template #item="{ element }">
        <div class="item" style="background: #3480fb14">
            <i class="iconfont icon-xinxi" style="color: #3480fb"></i> //iconfont库标签
            {{ element.name }}
        </div>
    </template>
</draggable>
<script setup>
    const state = reative({
        list:[
          { name: "A组", id: 1 },
          { name: "库存", id: 2 },
          { name: "销量", id: 3 },
          { name: "日志", id: 4 },
        ]
    })
    //拖拽开始的事件
    const onStart = () => {
        console.log("开始拖拽");
    }
    //拖拽结束的事件
    const onEnd = () => {
        console.log("结束拖拽");
    }
    //移动事件
    const onMove = (e) => {
       console.log("结束拖拽");
    }
</script>