拖拽的那些事儿

2020-08-06

<template>
    <div
        class="contain"
        :id="`drag`+index"
        :ref="`drag`+index"
        draggable="true"
        @dragstart="handleDragstart"
        @drag="handleDrag"
        @drop="handleOndrop"
        @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;
            }
            // 记录父元素
            const bParent = b.parentNode;
            const aParent = a.parentNode;
            // 记录下一个同级元素
            const aNext = a.nextElementSibling;
            const bNext = b.nextElementSibling;
            // 如果参照物是邻近元素则直接调整位置
            if (aNext === b) {
                bParent.insertBefore(b, a);
                return;
            }
            if (bNext === a) {
                aParent.insertBefore(a, b);
                return;
            }
            if (a.contains(b)) {
                aParent.insertBefore(b, a);
                bParent.insertBefore(a, bNext);
                // return aParent.insertBefore(b, a), bParent.insertBefore(a, bn);
                return;
            }
            bParent.insertBefore(a, b);
            aParent.insertBefore(b, aNext);
        },
        handleDragstart(ev) {
            ev.dataTransfer.setData('dragDom', ev.target.id);
        },
        handleDrag() {
            // eslint-disable-next-line no-console
            console.log('drag-在元素开始时反复触发');
        },
        handleDragend() {
            // eslint-disable-next-line no-console
            console.log('dragend-在拖动操作完成时触发');
        },
        allowDrop(ev) {
            ev.preventDefault();
        },
        handleOndrop(event) {
            const 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-放下时时触发');
        },
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        dragInit() {},
    },
    components: {},
    mounted() {
        this.dragInit();
    },
};
</script>
<style>
.contain {
  cursor: pointer;
}
</style>

调用

<template>
    <div class="box">
        <dragAndDrop
            class="contain"
            v-for="(item, index) in arr"
            :key="index"
            :index="index"
        >
            {{index}}
        </dragAndDrop>
    </div>
</template>
<script>
import dragAndDrop from './components/drag';
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>

参考：
可实现demo: https://juejin.im/post/6844903824784621581

前置知识：
https://juejin.im/post/6844903513491767303#heading-6

sortablejs中文配置：
http://www.sortablejs.com/options.html

sortablejs demo:
https://sortablejs.github.io/Sortable/#swap