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 相关文章推荐
js计算精度问题小结
Apr 22 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JS delegate与live浅析
Dec 21 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
深入密码加salt原理的分析
2013/06/06 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
教师节促销活动方案
2014/02/14 职场文书
民间借贷协议书范本
2014/10/01 职场文书
医院科室评语
2015/01/04 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
被委托人身份证明
2015/08/07 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
vue首次渲染全过程
2021/04/21 Vue.js