简单高效的拖放功能

前言

最近要做一个拖放功能，一开始是直接百度看看有什么好用的拖放库。百度了一圈发现没啥好用的，最后发现HTML5 已经支持了拖放这个功能，真的是说明自己太菜了，没有好好学习原生的html。

draggable 属性

draggable 属性规定元素是否可拖动。该属性有3个值：

• true：规定元素可以拖动
• fase：规定元素不可拖动
• auto：使用浏览器的默认特性

示例：

<p draggable="true">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

事件

只要拖动属性还不够，还需要相应的事件才能完成这个拖放的功能。原生事件有以下3个（vue中使用时不要加on）

ondragstart 和 setData()

ondragstart 规定当元素被拖动时会发生什么，该事件会返回一个ev事件参数
setData 设置被拖拽数据的数据的key和value

 ev.dataTransfer.setData("Text",ev.target.id);

ondragover 规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

ondragover

ondrop和getData

ondrop 规定当放置被拖拽数据/元素时会发生什么事件
getData 根据key值获取被拖拽数据的数据

示例

<template>
    <div>
        <p>拖动 图片到矩形框中:</p>
        <div id="div1" @drop="drop" @dragover="allowDrop"></div>
        <br>
        <img id="drag1" src="https://scpic.chinaz.net/files/pic/pic9/202204/apic40085.jpg" draggable="true"
            @dragstart="drag">
    </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    mounted() {

    },
    methods: {
        //允许放置
        allowDrop(ev) {
            ev.preventDefault();
        },
        //图片开始拖拽执行的事件
        drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
            console.log("开始了：", ev)
        },
        //进行放置执行的事件
        drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
            console.log("放下了：", ev)
        }
    }
};
</script>

<style scoped lang="scss">
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

#drag1 {
    width: 340px;
    height: 70px;
    cursor: move;
}
</style>