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": "^2.3.3",
  "vue-router": "^2.3.1",
  "vuedraggable": "^2.11.0"
 },

2.在你的组件中引进依赖：

import draggable from 'vuedraggable'

3.注册：draggable这个组件

components: {
　　draggable
},

4.使用html模板中使用该组件

<draggable v-model="tags" :move="getdata" @update="datadragEnd">
    <transition-group>
      <div v-for="element in tags" :key="element.id">
        {{element.name}}
      </div>
    </transition-group>
</draggable>

5.有两个常用的方法

一个是拖动中

一个是拖动结束

 methods: {
   getdata (evt) {
    console.log(evt.draggedContext.element.id)
   },
   datadragEnd (evt) {
    console.log('拖动前的索引 :' + evt.oldIndex)
    console.log('拖动后的索引 :' + evt.newIndex)
    console.log(this.tags)
   }
  }

现在你就可以自己尝试使用了。

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

赞 (0)

相关推荐

  • Vue自定义指令拖拽功能示例

    下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1

  • vue2.0使用Sortable.js实现的拖拽功能示例

    vue2.0使用Sortable.js实现的拖拽功能示例

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载. 实现效果 实现后的效果如图所示:

  • vuejs2.0运用原生js实现简单的拖拽元素功能示例

    vuejs2.0运用原生js实现简单的拖拽元素功能示例

    整理文档,搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例,留作笔记. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta

  • 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实现开关按钮拖拽效果

    本文实例为大家分享了Vue实现开关按钮拖拽效果的具体代码,供大家参考,具体内容如下 css: <style> .box { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background: red; } .box2 { position: absolute; left: 400px; top: 100px; width: 100px; height: 100px; background:

  • vue实现弹窗拖拽效果

    本文实例为大家分享了vue实现弹窗拖拽效果的具体代码,供大家参考,具体内容如下 前言 实现拖拽其实简单来说就分为三步 一.创建一个js文件 因为本身dialog窗口不具备移动拖拽能力,所以需要以下方法去实现,在src/components同级文件下创建utils文件夹,然后创建名为directives.js的文件. directives.js的代码如下: import Vue from 'vue'   // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag

  • vue实现拖拽效果

    vue实现拖拽效果

    vue中实现拖拽效果,供大家参考,具体内容如下 首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3(事件对象中记录的鼠标位置) 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览器的客户端左上角为原点(不计算滚动条位置) evt.clientY evt.pageX 相对于浏览器的客户端左上角为原点(计算滚动条的位置) evt.pageY evt.offsetX 以自己的左上角

  • Vue实现简单的拖拽效果

    本文实例为大家分享了Vue实现简单拖拽效果的具体代码,供大家参考,具体内容如下 自定义指令v-drag l 存在时 只能横向拖拽 t 存在时 只能纵向拖拽 lt都存在时 可以任意方向拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

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

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

  • Vue利用draggable实现多选拖拽效果

    Vue利用draggable实现多选拖拽效果

    目录 前言 实现思路 Demo全部代码 Demo实现效果 前言 最近产品提出一个排序需求,希望能进行拖拽排序,我一想,vue2插件这么多,sortable.js.draggable分分钟实现了,但是还有一个需求希望能够实现多选拖拽,这个就有点麻烦,查询了许多资料,暂时没有发现能够多选的拖拽组件,如果自己写一个,既耗费时间,实现效果上必然没有draggable这种成熟轮子效果好,于是决定基于draggable做改进. 实现思路 我们知道draggable插件只要设置相同的group名字就能实现分组

  • 基于vue实现一个禅道主页拖拽效果

    效果图如下所示: 源码地址 bb两句 最近在做一个基于vue的后台管理项目.平时项目进度统计就在上禅道上进行.so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面. 既然领导发话,那就开干.. 所有技术:vue + vuedraggable 拖动的实现基于 vuedraggable 的插件开发. 主页为两栏流式布局,每一个组件可以在上下拖动,也可以左右拖动. 基本步骤 布局 这块布局为最为普通的两栏布局,这里采用flex布局.左边自适应,右边为固定宽. .layout-containe

  • vue项目中实现el-dialog组件可拖拽效果

    vue项目中实现el-dialog组件可拖拽效果

    目录 0. 首先上图,看效果 1. 实现方法 参考资料 0. 首先上图,看效果 1. 实现方法 第一步:创建 drag.js文件 实现拖拽源码 /**  * 拖拽移动  * @param  {elementObjct} bar 鼠标点击控制拖拽的元素  * @param {elementObjct}  target 移动的元素  * @param {function}  callback 移动后的回调  */ export function startDrag(bar, target, call

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

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

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

随机推荐