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 18 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
ext for eclipse插件安装方法
2008/04/27 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python实现傅里叶级数展开的实现
2018/07/21 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python几种常见算法汇总
2020/06/02 Python
python mysql中in参数化说明
2020/06/05 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
工程监理应届生求职信
2013/11/09 职场文书
大专生的学习自我评价
2013/12/04 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Python制作表白爱心合集
2022/01/22 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏