vue拖拽组件使用方法详解

前言

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

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

关于拖拽 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 拖放

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

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