vue element el-transfer增加拖拽功能


Posted in Vue.js onJanuary 15, 2021

芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能;
原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs

首先安装

sudo npm i sortablejs --save-dev

html代码

<template>
  <el-transfer ref="transfer" id="transfer" v-model="value" :data="data">
   <span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event,option)">{{ option.key }} - {{ option.label }}</span>
  </el-transfer>
</template>```

create

<script>

   import Sortable from 'sortablejs'

   export default {
      data() {
        const generateData = _ => {
          const data = []; for (let i = 1; i <= 15; i++) {
            data.push({
              key: i,
              label: `备选项 ${i}`,
              disabled: i % 4 === 0 });
          } return data;
        }; return {
          data: generateData(),
          value: [1, 4],
          draggingKey : null }
      },
      mounted() {
        const transfer = this.$refs.transfer.$el
        const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
        const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
        const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]
        Sortable.create(rightEl,{
          onEnd: (evt) => {
            const {oldIndex,newIndex} = evt;
            const temp = this.value[oldIndex] 
            if (!temp || temp === 'undefined') {
              return
            }// 解决右边最后一项从右边拖左边,有undefined的问题
            this.$set(this.value,oldIndex,this.value[newIndex])  
            this.$set(this.value,newIndex,temp)
          }
        })
        const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]
        Sortable.create(leftEl,{
          onEnd: (evt) => {
            const {oldIndex,newIndex} = evt;
            const temp = this.data[oldIndex] 
            if (!temp || temp === 'undefined') {
              return
            } // 解决右边最后一项从右边拖左边,有undefined的问题
            this.$set(this.data,oldIndex,this.data[newIndex]) 
            this.$set(this.data,newIndex,temp)
          }
        })
        leftPanel.ondragover = (ev) => {
          ev.preventDefault()
        }
        leftPanel.ondrop = (ev) => {
          ev.preventDefault();
          const index = this.value.indexOf(this.draggingKey) if(index !== -1){ this.value.splice(index,1)
          }
        }
        rightPanel.ondragover = (ev) => {
          ev.preventDefault()
        }
        rightPanel.ondrop = (ev) => {
          ev.preventDefault();  if(this.value.indexOf(this.draggingKey) === -1){ this.value.push(this.draggingKey)
          }
        }
      },
      methods: {
        drag(ev,option) { this.draggingKey = option.key
        }
      }

    } 
</script>

到此这篇关于vue element el-transfer增加拖拽功能的文章就介绍到这了,更多相关element el-transfer拖拽内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
Vue中引入svg图标的两种方式
Jan 14 #Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 #Vue.js
vue 递归组件的简单使用示例
Jan 14 #Vue.js
vue element和nuxt的使用技巧分享
Jan 14 #Vue.js
vue动态设置路由权限的主要思路
Jan 13 #Vue.js
You might like
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
深入理解NumPy简明教程---数组1
2016/12/17 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
建筑专业自我鉴定
2013/10/22 职场文书
求职推荐信范文
2013/12/01 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
物资采购方案
2014/06/12 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
支教个人总结
2015/03/04 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python