一、Api
1. ondragstart 源对象开始拖动的事件
2. ondrag 源对象拖动中事件
3. ondragend 源对象结束拖动事件
4. ondragenter 源对象进入目标对象范围内的事件
5. ondragover 源对象进入目标对象内拖动的事件(需要阻止默认事件)
6. ondragleave 源对象离开目标对象范围的事件
7. ondrop 鼠标释放的事件
原理就是目标对象监听源对象是否进入范围,进入范围就通过js将拖动的那个元素插入到目标元素
二、拖拽上传文件
案例:
1. 鼠标释放的时候可以通过e.dataTransfer.items拿到上传的文件,但是这个是伪数组,需要转一下
2. 循环这个数组用item.getAsFile() 转为file文件
3. 这样就可以处理下面的逻辑
4. 通过URL.createObjectURL(file)可以转为blob格式的临时路径
5. 通过reader对象 reader.readAsDataURL(file) 可以转为base64格式,然后就可以发请求传给后端(注意reader对象需要监听它的onload事件)
window.onload = function () {
var box = document.querySelector(".box");
var box1 = document.querySelector(".box1");
box.ondragenter = function (ev) {
ev.target.style.borderColor = "blue";
};
box.ondragover = function (ev) {
ev.preventDefault();
};
box.ondragleave = function () {};
box.ondrop = function (e) {
e.preventDefault();
Array.from(e.dataTransfer.items).forEach((item) => {
let img = new Image();
let reader = new FileReader();
let base64 = reader.readAsDataURL(item.getAsFile()); // 通过FileReader转为base64格式
reader.onload = function (ev) {
console.log(ev.target.result);
};
img.src = URL.createObjectURL(item.getAsFile()); //转为blob格式的临时路径
img.style.width = "100px";
img.style.height = "50px";
e.target.appendChild(img);
});
};
};