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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
php代码把全角数字转为半角数字
2007/12/10 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python写程序统计词频的方法
2019/07/29 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
物流仓储计划书
2014/01/10 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
债务授权委托书范本
2014/10/17 职场文书
男方婚礼答谢词
2015/01/20 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
安全教育主题班会总结
2015/08/14 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python