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 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
vue+elementUI实现简单日历功能
Sep 24 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
如何使用Strace调试工具
2013/06/03 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
python实现车牌识别的示例代码
2019/08/05 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
用 python 进行微信好友信息分析
2020/11/28 Python
童装店创业计划书
2014/01/09 职场文书
家长对小学生的评语
2014/01/28 职场文书
党建示范点实施方案
2014/03/12 职场文书
异地年检委托书范本
2014/09/24 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
追悼会答谢词范文
2015/09/29 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python