vue3使用vuedraggable实现拖拽功能


Posted in Vue.js onApril 06, 2022

本文实例为大家分享了vue3使用vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下

1、npm i vuedraggable -S,使用这个命令,vue3会报错,如下图

vue3使用vuedraggable实现拖拽功能

2、使用npm uninstall vuedraggable -S 卸载,再使用npm i -S vuedraggable@next下载最新版

3、vue使用代码如下:

<template>
  <div>
    <h1 class="title">拖拽</h1>
    <draggable
      class="wrapper"
      v-model="list"
      @start="drag = true"
      @end="drag = false"
      item-key="index"
    >
      <template #item="{ element }">
        <div class="item">
          <p>{{ element }}</p>
        </div>
      </template>
    </draggable>
  </div>
</template>
 
<script>
import { reactive, toRefs, onMounted } from 'vue'
import draggable from 'vuedraggable'
 
export default {
  name: 'dragAndDrop',
  components: { draggable },
  setup () {
    const state = reactive({
      drag: false,
      list: [1, 2, 3, 4, 5, 6]
    })
    onMounted(() => {})
    return {
      ...toRefs(state)
    }
  }
}
</script>
 
<style scoped>
.title {
  text-align: center;
  color: #42b983;
}
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.item {
  width: 100px;
  height: 100px;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  margin: 10px;
  background-color: #42b983;
  color: #ffffff;
}
</style>

4、效果如下图

vue3使用vuedraggable实现拖拽功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
详解vue 组件注册
Nov 20 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
vue整合百度地图显示指定地点信息
vue中使用mockjs配置和使用方式
VUE使用draggable实现组件拖拽
Apr 06 #Vue.js
教你部署vue项目到docker
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
You might like
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
PHP打印输出函数汇总
2016/08/28 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
pandas 选择某几列的方法
2018/07/03 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
电大自我鉴定范文
2013/10/01 职场文书
师范生实习自我鉴定
2013/11/01 职场文书
个人简历自我评价
2014/01/06 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
民事起诉状范文
2015/05/19 职场文书
正规欠条模板
2015/07/03 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏