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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue实现简易音乐播放器
Aug 14 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
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
激活 ActiveX 控件
2006/10/09 Javascript
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
vue实现扫码功能
2020/01/17 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
python的concat等多种用法详解
2018/11/28 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python实现飞行棋游戏
2020/02/05 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
如何在sublime编辑器中安装python
2020/05/20 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python调用C/C++的方法解析
2020/08/05 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
财务经理岗位职责
2013/11/09 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
上课说话检讨书500字
2014/11/01 职场文书
2015年医院工作总结范文
2015/04/09 职场文书