vue3使用vuedraggable实现拖拽功能

2024-07-28 23:20:07

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

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

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、效果如下图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue draggable resizable 实现可拖拽缩放的组件功能

虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了. 所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本,最近正好有时间就适配一下. 新增特征冲突检测吸附对齐默认样式优化功能预览项目地址 github.com/gorkys/vue-- 如果喜欢该项目,欢迎 Star 新增Props isConflictCheck Type: Boolean Required: false Default: false 定义组件是否开启冲突检
vue.draggable实现表格拖拽排序效果

本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下主要使用vuedraggable和sortablejs两个组件. 1.安装组件 npm install vuedraggable npm install sortablejs 2.引入组件 import draggable from 'vuedraggable'; import Sortable from 'sortablejs'; export default { components:
Vue组件Draggable实现拖拽功能

Draggable为基于Sortable.js的vue组件,用以实现拖拽功能. 具体说明,请参考:学习链接 npm官方演示: vuedraggable特性: 支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操作当需要完全控制时,可以抛出所有变化可以和现有的UI组件兼容使用安装: npm install vuedraggable 页面引入: import draggable from 'v
Vue.Draggable拖拽功能的配置使用方法

本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedraggable' 注册组件 components:{ draggable } vue的template代码如 <draggable v-model="itemlis" //开始移动方法 :move=
vuedraggable+element ui实现页面控件拖拽排序效果

项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下如上图要实现这些控件的拖拽排序这是拖拽后由于公司网络的原因,项目没有使用npm,都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript"
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序

Vue-draggable 的github传送门 : https://github.com/SortableJS/Vue.Draggable 一. 下载依赖包:npm install vuedraggable -S 二. 在需要使用的当前界面引入依赖,注册组件: import draggable from "vuedraggable"; export default { components: { draggable, } 三. 在template 中建立表格,分别写出thead 部
Vue使用vue-draggable 插件在不同列表之间拖拽功能

今天分享一个vue项目中在不同列表拖拽设置选项的功能,这个功能也是在做项目中遇到的,先说下这个功能的要点(参考下图),有2个列表,左侧列表展示已选,右侧列表展示未选,通过拖拽进行设置,已选的选项不能超过4个,超过的话自动将拖拽之前的最后一项清除到右侧,且如果从已选往未选里拖的时候,右侧显示垃圾桶的提示(如图). 拖拽功能图片: 垃圾桶显示图: 首先讲讲vue-draggable的使用安装vue-draggable: npm install vuedraggable 在使用插件的组件内引入vue
vue拖拽排序插件vuedraggable使用方法详解

大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入首先在vue项目中,用npm包下载下来 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import draggable from 'vuedraggable' 别忘了下面要注册组件 components: { dr
vue插件draggable实现拖拽移动图片顺序

本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法,供大家参考,具体内容如下例如图片显示的这种图片列表.商品展示需要拖动图片改变顺序,vuedraggable可以实现拖拽. 首先, npm i vuedraggable 然后在组件中引入, import draggable from 'vuedraggable'; 定义组件, components: { draggable, }, 标签中应用, <ul class="pic-list clearfix"
Vue.Draggable实现拖拽效果

快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":

vue3使用vuedraggable实现拖拽功能

相关推荐

随机推荐