拖拽

一、JS拖拽
JS里拖拽三事件， onmousedown onmousemove onmouseup 是实现交互性效果，根据鼠标的移动位置让标签元素联动
而H5拖拽也可以实现但更简单，实际例子： 百度图片识别，qq邮箱文件提交，百度网盘文件上传，并可以获取到文件的 名称，大小，修改时间
标签元素默认是不可以拖拽的，draggable="true"才能够被拖拽

const box = document.querySelector("div");
box.onmousedown = function(e){
  e = e || window.event;
  let x = e.clientX - this.offsetLeft;
  let y = e.clientY - this.offsetTop;
  document.onmousemove = function(e){
    box.style.cssText = "left:" + (e.clientX - x) + "px;top:" + (e.clientY - y) + "px";
  }
  document.onmouseup = function(){
    document.onmousemove = document.onmouseup = null;
  }
}

二、h5拖拽

<div id = "box" draggable = "true"></div>

const box = document.querySelector("div");
box.ondragover = function(e){
  this.style.cssText = "left:" + (e.clientX - 100) + "px;top:" + (e.clientY - 50) + "px";
}
box.ondragend = function(e){
  this.style.cssText = "left:" + (e.clientX - 100) + "px;top:" + (e.clientY - 50) + "px";
}

三、拖拽兄弟

<div id = "box"></div>
<div id = "drag" draggable="true"></div>

const box = document.querySelector(#box);
const drag = document.querySelector(#drag);
let n = 0;

//拖拽元素
drag.ondragstart = function(){  //拖拽的一瞬间
  this.style.background = "pink";
}
drag.ondrag = function(){  //连续触发
  document.title = n++;
}
drag.ondragend = function(){  //拖拽结束
  this.style.background = "red";
}

//目标元素
box.ondragenter = function(){  //监听拖拽元素进入到目标元素区域内
  this.style.background = "skyblue";
}
box.ondragover = function(e){  //在目标元素身上连续触发
  this.innerHTML = n++;
  e.preventDefault();
  e.stopPropagation();
}
box.ondragleave = function(){  //在目标元素身上离开
  this.innerHTML = "";
}
box.ondrop = function(e){  //在目标元素上面释放鼠标时触发，必须将ondragover中设置e.preventDefault()和e.stopPropagation()才能触发
  e.preventDefault();
  e.stopPropagation();
  document.body.removeChild(dra
}

四、火狐兼容

const box = document.querySelector("#box");
const list = document.querySelector("#list");
const li = list.querySelectorAll("li");
li.forEach((item, index)=>{
  item.setAttribute("draggable", "true");
  item.ondragstart = function(e){
    e.dataTransfer.setData("key", index);  //兼容火狐，捕获dataTransfer对象里的数据
  }
})
box.ondragenter = function(){
  this.innerHTML = "请释放你的双手";
}
box.ondragover = function(){
  e.preventDefault();
  e.stopPropagation();
}
box.ondragleave = function(){
  this.innerHTML = "请把li拖拽到此区域";
}
box.ondrop = function(e){
  e.preventDefault();
  e.stopPropagation();
  list.removeChile(li[e.dataTransfer.getData("key")]);
}

五、file对象

const box = document.querySelector("div");
box.ondragover = function(e){
  e.preventDefault();
  e.stopPropagation();
}
box.ondrop = function(e){
  e.preventDefault();
  e.stopPropagation();
  console.log(
    e.dataTransfer.files[0].name,
    e.dataTransfer.files[0].type,
    e.dataTransfer.files[0].lastModified,
    e.dataTransfer.files[0].lastModifiedDate.toLocaleDateString(),
    e.dataTransfer.files[0].lastModifiedDate.toLacaleTimeString(),
    e.dataTransfer.files[0].lastModifiedDate.toDateString(),
  );
  //拖拽图片预览
  let oFile = e.dataTransfer.files[0];
  let blob = new Blob([oFile]);  //第一个参数一定是一个数组，第二个为mime类型
  let url = window.URL.createObjectURL(blob);
  let img = new Image();
  img.width = 300;
  img.height = 150;
  img.src = url;
  img.onload = function(){
    document.body.appendChild(this);
  }
}

六、fileReader对象读取数据

const box = document.querySelector("div");
box.ondragover = function(e){
  e.preventDefault();
  e.stopPropagation();
}
box.ondrop = function(e){
  e.preventDefault();
  e.stopPropagation();
  console.log(
    e.dataTransfer.files[0].name,
    e.dataTransfer.files[0].type,
    e.dataTransfer.files[0].lastModified,
    e.dataTransfer.files[0].lastModifiedDate.toLocaleDateString(),
    e.dataTransfer.files[0].lastModifiedDate.toLacaleTimeString(),
    e.dataTransfer.files[0].lastModifiedDate.toDateString(),
  );
  //拖拽图片预览
  let oFile = e.dataTransfer.files[0];
  //创建文件读取对象
  let reader = new FileReader();
  reader.readAsDataURL(oFile);  //分析oFile文件对象
  reader.onload = function(){
    //返回data:base64数据 A-Z a-z 0~9 + / = 64位字符
    console.log(this.result);
    let img = new Image();
    img.width = 300;
    img.height = 150;
    img.src = this.result;
    img.onload = function(){
      document.body.appendChild(this);
    }
  }
}

Blob对象与URL对象读取数据
Blob对象代表了一段二进制数据，提供了一系列操作接口
file对象的父类型是Blob对象
对象URL也被称为 blob URL，指的是引用保存在File或Blob中数据的URL，使用对象URL的好处是没必要把内容读取到js中，而直接使用文件内容，能生成一个链接，例如 Img的src = URL