vue3中使用vuedraggable

最新推荐文章于 2025-04-24 10:33:28 发布

大盗夕落

最新推荐文章于 2025-04-24 10:33:28 发布

阅读量3.2k

点赞数 3

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_45621877/article/details/129661531

版权

该文章演示了如何安装最新版本的Svuedraggable库，并在Vue.js应用中使用它来创建可拖拽的列表。通过设置`item-key=id`解决缺失的`itemKey`问题，同时定义了拖拽开始和结束的事件处理函数，提供了一段包含模板和事件监听器的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装最新版本

npm i -S vuedraggable@next

如果报 missing required prop： “itemKey”

加上

 item-key="id"

完整代码

 <draggable
        :list="state.FriendList"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
        @start="onStartFriLink"
        @end="onEndFriLink"
        item-key="id"
      >
        <template #item="{ element }" :key="element.id">
            <li class="border_16" >           
              <img src="">
              <div>{{ element.name }}</div>
            </li>
          </template>
        </draggable>




//拖拽开始的事件
const onStartFriLink = () => {
  console.log("开始拖拽");
};
//拖拽结束的事件
const onEndFriLink = () => {
  console.log("结束拖拽");
};