vue拖拽组件使用方法详解


Posted in Javascript onDecember 01, 2018

前言

pc端开发需要拖拽组件完成列表的顺序交换,一般移动端的UI组件会包含,但是我在用的iview并没有此功能的组件,于是手写一个,实现起来很简单。效果图如下:

vue拖拽组件使用方法详解

可以拖拽完成新排序,点击某一项可以触发相关事件.

关于拖拽 drag & drop

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

拖拽对象

dataTransfer对象,只能在拖放事件的事件处理程序中访问。重要属性:

  • effectAllowed ( none | copy | copyLink | copyMove | link、linkMove | move | all | uninitialized ):设置或返回被拖动元素允许发生的拖动行为。
  • dropEffect( none | copy | link | move ):设置或返回拖放目标上允许发生的拖放行为。如果此设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。
  • dataTransfer.getData(format):获取DataTransfer对象中设置format格式的数据。其中format代表数据格式,data代表数据。

拖拽属性

draggable 属性规定元素是否可拖动。

拖拽事件

  • ondragstart:在拖动开始时执行,返回被拖动元素。
  • ondragover:返回在何处放置被拖动的数据
  • 默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式
  • ondragenter:在被拖动的元素进入到放置目标时执行
  • ondragleave:在被拖动的元素离开放置目标时执行
  • ondragend && ondrop:皆指鼠标松开被拖动对象的事件,但是返回的分别为被拖动对象和被拖动元素悬挂的那个元素

源码:

<template>
 <div class="transition-container">
   <div class="item" v-for="(item, index) in items" :key="index"
    draggable="true"
    @dragstart="handleDragStart($event, item)"
    @dragover.prevent="handleDragOver($event, item)"
    @dragenter="handleDragEnter($event, item)"
    @dragend="handleDragEnd($event, item)" 
    @click="chooseNav(item)"
    >
    <p class="trans-btn">
     <span v-if="item.problemId">
      <b class="id">
        {{item.problemId}}
      </b>
       {{item.key}}
     </span>
     <span v-else>
       {{item.key}}
     </span>
     <span>
      <i-button v-if="btn" size="small" type="error" style="margin-right: 10px;" @click="deleteItem(item, index)">删除</i-button>
     </span>
    </p>
   </div>
 </div>
</template>
<script>
import './index.less';

export default {
  name: 'transition',
  props: {
    dataSource: Array,
    btn: Boolean,
  },
  data() {
    return {
      items: [],
      dragging: null,
    };
  },
  watch: {
    dataSource(val) {
      this.items = val;
    },
    dragging(val) {
      if (this.dataSource.includes(val)) {
        this.dragging = val;
      } else {
        this.dragging = null;
      }
    },
  },
  methods: {
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd() {
      this.dragging = null;
      this.$emit('hasChanged', this.items);
    },
    // 首先把div变成可以放置的元素,即重写dragenter/dragover
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move';// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e, item) {
      if (this.dragging) {
        e.dataTransfer.effectAllowed = 'move';// 为需要移动的元素设置dragstart事件
        if (item === this.dragging) {
          return;
        }
        const newItems = [...this.items];
        console.log(newItems);
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.items = newItems;
      }
    },
    chooseNav(val) {
      this.$emit('selectItem', val);
    },
    deleteItem(item, index) {
      this.$emit('deleteItem', item, index);
    },
    editor(item, index) {
      this.$emit('editorItem', item, index);
    },
  },
};
</script>

基本功能就完成啦

参考文章

W3school——HTML 5 拖放
div拖拽互换位置(vue)
如果简单的功能不能满足,推荐这个写好的轮子

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
Three.js学习之网格
Aug 10 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
vue实现div拖拽互换位置
Jul 29 #Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 #Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 #Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 #Javascript
Vue组件Draggable实现拖拽功能
Dec 01 #Javascript
BootStrap modal实现拖拽功能
Dec 01 #Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 #Javascript
You might like
简化php模板页面中分页代码的解析
2009/02/06 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
php生成扇形比例图实例
2013/11/06 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
javascript的函数
2007/01/31 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
Underscore源码分析
2015/12/30 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
python实现小球弹跳效果
2019/05/10 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
品质标语大全
2014/06/21 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
Win11开始菜单添加休眠选项
2022/04/19 数码科技
Python实现双向链表基本操作
2022/05/25 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python