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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue router 动态路由清除方式
May 25 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
ThinkPHP分页实例
2014/10/15 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
js常用函数 不错
2006/09/08 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
一名毕业生的自我鉴定
2013/12/04 职场文书
电子商务个人自荐信
2013/12/12 职场文书
公司中秋节活动方案
2014/02/12 职场文书
纠风工作实施方案
2014/03/15 职场文书
销售经理竞聘书
2014/03/31 职场文书
暑假学习心得体会
2014/09/02 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
学校国庆节活动总结
2015/03/23 职场文书
学校远程教育工作总结
2015/08/11 职场文书
运动会跳远广播稿
2015/08/19 职场文书
小学科学课教学反思
2016/02/23 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书