前端实现拖拽效果

一、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);
        });
      };
    };