HTML5原生拖拽/拖放 Drag Drop实现一个拖拽交换组件

如果不是很了解h5拖拽api的一些特性，请移步->

掘金大佬讲h5拖拽的一个帖子

由于项目需求，需要实现一个拖拽组件，是一个基于html5实现的一个组件，h5的功能相对来讲已经比较完善了，因为还是在demo阶段，所以目前没有什么定制化功能，只是实现了交换功能

目录结构：

箭头为我们的组件

demo代码：

组件源代码

<template><divclass="contain":id="`drag`+index":ref="`drag`+index"draggable="true"v-on:dragstart="handle_dragstart"v-on:drag="handle_drag"v-on:drop="handle_ondrop"v-on:dragover="allowDrop"><slot></slot></div>
</template>
<script>
export default {
    data() {
    return {
    };},// 唯一标识，必传props: {
    index: {
    type: Number,required: true}},methods: {
    swapElements(a, b) {
    // 交换两个dom元素if (a == b) return;//记录父元素var bp = b.parentNode,ap = a.parentNode;//记录下一个同级元素var an = a.nextElementSibling,bn = b.nextElementSibling;//如果参照物是邻近元素则直接调整位置if (an == b) return bp.insertBefore(b, a);if (bn == a) return ap.insertBefore(a, b);if (a.contains(b))//如果a包含了breturn ap.insertBefore(b, a), bp.insertBefore(a, bn);else return bp.insertBefore(a, b), ap.insertBefore(b, an);},handle_dragstart(ev) {
    ev.dataTransfer.setData("dragDom", ev.target.id);},handle_drag() {
    console.log("drag-在元素开始时反复触发");},handle_dragend() {
    console.log("dragend-在拖动操作完成时触发");},allowDrop(ev) {
    ev.preventDefault();},handle_ondrop(event) {
    let data = event.dataTransfer.getData("dragDom");console.log(document.getElementById(data), event.target, "这两个dom");this.swapElements(document.getElementById(data), event.currentTarget);console.log(event.target, "dragend-放下时时触发");},dragInit() {
    }},components: {
    },mounted() {
    this.dragInit();}
};
</script>
<style>.contain{
    cursor: pointer;}
</style>

demo代码

<template><div class="box"><dragAndDropclass="contain"v-for="(item, index) in arr":key="index":index='index'>{
    {
    index}}</dragAndDrop></div>
</template>
<script>
import dragAndDrop from "./dragAndDrop";
export default {
    data() {
    return {
    arr: []};},methods: {
    },components: {
    dragAndDrop},mounted() {
    this.arr = new Array(9).fill(null);// this.dragInit();}
};
</script>
<style>
.box {
    display: flex;flex-wrap: wrap;
}
.contain {
    width: 200px;height: 200px;background: purple;margin: 20px;font-size: 40px;
}
</style>