vue使用 HTML5 原生拖放
拖放事件
-
ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
-
ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
-
ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
-
ondragleave 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
-
ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
-
drop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
完成一次拖放的事件过程是: dragstart –> dragenter –> dragover –> drop –> dragend
-
event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。
-
DataTransfer 对象:拖拽对象用来传递数据的媒介,使用一般为event.dataTransfer。
-
event.dataTransfer.setData() 方法设置被拖动数据的数据类型和值
-
event.dataTransfer.getData() 方法获得被拖的数据
-
event.dataTransfer.setDragImage() 指定图片或者文档元素做拖动时的视觉效果。在被拖拽的元素中首先添加mousedown事件,用于在dragstart事件前生成图片内容
-
var img = new Image();
img.src = '图片的路径或者svg格式的代码等'
onStart(e) {
// 设置自定义鼠标拖拽过程中显示的图像
e.dataTransfer.setDragIamge(img, xOffset, yOffset)
}
1. 把元素设置为可拖放
首先:为了把一个元素设置为可拖放,请把 draggable 属性设置为 true:
<div id="dragBox" draggable></div>
2. 拖放的内容 - ondragstart 和 setData()
然后,规定当元素被拖动时发生的事情。
在上面的例子中,ondragstart 属性调用了一个 onStar(e) 函数,规定拖动什么数据。
dataTransfer.setData() 方法设置被拖动数据的数据类型和值:
<div class="left box" @dragstart="onStart" @dragend="onEnd">
<div id="dragBox" draggable></div>
</div>
<script>
onStart(e) {
console.log("拖拽开始");
e.dataTransfer.setData("mydata", e.target.id);
},
</script>
3. 拖到何处 - ondragover
ondragover 事件规定被拖动的数据能够被放置到何处。
默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。
这个任务由 ondragover 事件的 event.preventDefault() 方法完成:
<div
class="right box"
@drop="drop"
@dragover="dragOver"
@dragleave="dragleave"
@dragenter="dragenter"
></div>
<script>
dragOver(e) {
e.preventDefault(); // 一定要执行,否则ondrop事件不会被触发
},
</script>
4. 进行放置 - ondrop
当放开被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
<div
class="right box"
@drop="drop"
@dragover="dragOver"
@dragleave="dragleave"
@dragenter="dragenter"
></div>
<script>
drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("mydata");
e.target.appendChild(document.getElementById(data));
},
</script>
demo完整代码:
<template>
<div id="html5drag">
<div class="left box" @dragstart="onStart" @dragend="onEnd">
<div id="dragBox" draggable @mousedown="mouseDown"></div>
</div>
<div
class="right box"
@drop="drop"
@dragover="dragOver"
@dragleave="dragleave"
@dragenter="dragenter"
></div>
</div>
</template>
<script>
export default {
name: "html5drag",
data() {
return {
img: null,
};
},
methods: {
mouseDown() {
this.img = new Image();
console.log(this.img);
// this.img.src =
// "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF";
this.img.src = require("@/assets/mn.jpg");
// this.img.style.height = 50 + "px";
// this.img.style.width = 50 + "px";
},
onStart(e) {
console.log("拖拽开始");
e.dataTransfer.setDragImage(this.img, 10, 10);
e.dataTransfer.setData("mydata", e.target.id);
},
onEnd(e) {
console.log("拖拽结束");
},
drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("mydata");
e.target.appendChild(document.getElementById(data));
},
dragOver(e) {
e.preventDefault(); // 一定要执行,否则ondrop事件不会被触发
},
dragleave(e) {
console.log("离开放置区域");
},
dragenter(e) {
console.log("进入放置区域");
},
},
};
</script>
<style lang="scss" scoped>
#html5drag {
display: flex;
.box {
height: 100px;
width: 200px;
border: 1px solid #000;
}
.left {
margin-right: 50px;
}
#dragBox {
height: 50px;
width: 50px;
background: blueviolet;
}
}
</style>