Vue组件Draggable实现拖拽功能

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

具体说明，请参考：学习链接

npm官方演示：

vuedraggable特性：

  • 支持触摸设备
  • 支持拖拽和选择文本
  • 支持智能滚动
  • 支持不同列表之间的拖拽
  • 不以jQuery为基础
  • 和视图模型同步刷新
  • 和vue2的国度动画兼容
  • 支持撤销操作
  • 当需要完全控制时，可以抛出所有变化
  • 可以和现有的UI组件兼容

使用

安装：

npm install vuedraggable

页面引入：

import draggable from 'vuedraggable'

data定义数据进行模拟：这是排序的案例，跟上面图不一样

<template>
 <div>
  <!-- 调用组件 -->
  <draggable element="ul" v-model="listdata">
   <li v-for="item in listdata">{{item.name}}</li>
  </draggable>
  <!-- 展示list数据效果 -->
  {{listdata}}
 </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
 name: 'draggabletest',
 components: {
  draggable,
 },
 data () {
  return {
   listdata:[
    {
     id: 1,
     name: '叶落森1'
    },
    {
     id: 2,
     name: '叶落森2'
    },
    {
     id: 3,
     name: '叶落森3'
    },
    {
     id: 4,
     name: '叶落森4'
    },
    {
     id: 5,
     name: '叶落森5'
    }
   ]
  }
 },
}
</script>

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

赞 (0)

相关推荐

  • 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":

  • vue插件draggable实现拖拽移动图片顺序

    vue插件draggable实现拖拽移动图片顺序

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

  • Vue.Draggable拖拽功能的配置使用方法

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

  • vue拖拽排序插件vuedraggable使用方法详解

    vue拖拽排序插件vuedraggable使用方法详解

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

  • 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:

  • vuedraggable+element ui实现页面控件拖拽排序效果

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

  • Vue组件Draggable实现拖拽功能

    Vue组件Draggable实现拖拽功能

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

  • vue element el-transfer增加拖拽功能

    芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能: 原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs 首先安装 sudo npm i sortablejs --save-dev html代码 <template> <el-transfer ref="transfer" id="transfer" v-model="value" :data="data"> <

  • vue实现放大缩小拖拽功能

    vue实现放大缩小拖拽功能

    本文实例为大家分享了vue实现放大缩小拖拽功能的具体代码,供大家参考,具体内容如下 点击放大至全屏 再次点击缩小至原始  这个弹框是基于element dialog的基础上写的 1.再utils文件夹下面新建一个directives.js  (封装好了 直接拿去用) import Vue from 'vue'; import bigPic from '../assets/images/bigChange.png'; // v-dialogDrag: 弹窗拖拽属性 Vue.directive('d

  • vue基于Echarts的拖拽数据可视化功能实现

    vue基于Echarts的拖拽数据可视化功能实现

    背景 我司产品提出了一个需求,做一个数据基于Echars的可拖拽缩放的数据可视化,上网百度了一番,结果出现了两种结局,一种花钱买成熟产品(公司不出钱),一种没有成熟代码,只能自己写了,故事即将开始,敬请期待.......  不,还是先上一张效果图吧,请看...... 前期知识点 1. offset(偏移量) 定义:当前元素在屏幕上占用的空间,如下图: 其中: offsetHeight: 该元素在垂直方向上的占用的空间,单位为px,不包括margin. offsetWidth:该元素在水平方向上的

  • Vue draggable实现从左到右拖拽功能

    Vue draggable实现从左到右拖拽功能

    本文实例为大家分享了Vue draggable实现从左到右拖拽功能的具体代码,供大家参考,具体内容如下 1.安装插件 npm install vuedraggable 2.在需要使用的组件中引入 import draggable from 'vuedraggable' 3.注册组件 components:{undefined draggable } 示例: <div style="height: 1000px;">     <div class="test-

  • Vue使用vue-draggable 插件在不同列表之间拖拽功能

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

  • vue和H5 draggable实现拖拽并替换效果

    前言 公司项目需要做拖拽替换效果,本人用的vue框架.在网上找了很多资料都是用的 Vue.Draggable(git地址).但这个组件实现的拖拽后插入效果,我倒腾了很久也没有替换效果(如果Vue.Draggable能实现拖拽替换效果的话请大神给我留言). JQ有实现拖拽的插件,我下载过一个插件并看过源码,大致原理是给目标元素设置定位属性,通过监听鼠标mousedown,mouseup事件,再计算鼠标位置变化,然后给元素样式设置偏移值来实现拖拽效果的. H5提供了专门的拖拽API 给元素添加 dr

随机推荐