vue3中使用vuedraggable实现拖拽

包安装方式

bash 复制代码
yarn add vuedraggable@next
npm i -S vuedraggable@next

属性说明

如果下面的属性说明未能完全看明,可以看左边的对应的菜单查看详细说明和例子。

完整例子

javascript 复制代码
<template>
  <div class="itxst">
    <div>
      <draggable
        :list="state.list"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
        @start="onStart"
        @end="onEnd"
      >
        <template #item="{ element }">
          <div class="item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>
    <div>{{ state.list }}</div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import draggable from "vuedraggable";
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const state = reactive({
  //需要拖拽的数据,拖拽后数据的顺序也会变化
  list: [
    { name: "www.itxst.com", id: 0 },
    { name: "www.baidu.com", id: 1 },
    { name: "www.google.com", id: 2 },
  ],
});

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

//拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
};
</script>
<style scoped>
.itxst {
  width: 600px;
  display: flex;
}
.itxst > div:nth-of-type(1) {
  flex: 1;
}
.itxst > div:nth-of-type(2) {
  width: 270px;
  padding-left: 20px;
}
.item {
  border: solid 1px #eee;
  padding: 6px 10px;
  text-align: left;
}

.item:hover {
  cursor: move;
}
.item + .item {
  margin-top: 10px;
}
.ghost {
  border: solid 1px rgb(19, 41, 239);
}
.chosenClass {
  background-color: #f1f1f1;
}
</style>

如果报 missing required prop: "itemKey"

draggable加上属性

javascript 复制代码
 item-key="id"

文档:vue.draggable.next 中文文档

参考文档:vue3中使用vuedraggable

相关推荐
咔咔一顿操作7 分钟前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
琹箐7 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
Sun_light10 小时前
5 个理由告诉你为什么有了 JS 还要用 TypeScript
前端·typescript
梁辰兴13 小时前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
一斤代码20 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
sunbyte1 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
普宁彭于晏1 天前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
你喜欢喝可乐吗?1 天前
RuoYi-Cloud 验证码处理流程
java·spring cloud·微服务·vue
魂兮归乡1 天前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
鲸鱼14666570754191 天前
Screeps TypeScript 教程:使用 tsup 解决模块加载问题并实现自动化部署
typescript