欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue拖拽组件使用方法详解

程序员文章站 2022-05-19 19:44:03
前言 pc端开发需要拖拽组件完成列表的顺序交换,一般移动端的ui组件会包含,但是我在用的iview并没有此功能的组件,于是手写一个,实现起来很简单。效果图如下: 可...

前言

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 拖放

如果简单的功能不能满足,推荐这个写好的*

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