drag and drop

        document.addEventListener('drop', (e) => {
            e.preventDefault();
        }, false)
        document.addEventListener('dragover', (e) => {
            e.preventDefault();
        }, false)
        window.onload = () => {
            let odrag = document.querySelector('.box');
            //鼠标开始拖动<拖拽元素>时
            //在<拖拽元素>上触发此事件
            //监听器需要设置拖拽所需数据
            //从操作系统拖拽文件到浏览器时不触发此事件
            //dragstart

            //鼠标拖动<拖拽元素>进入<拖放目标>时
            //在<拖放目标>上触发
            //用于给拖放元素设置视觉反馈
            odrag.ondragenter = (e) => {
                e.preventDefault();
                e.target.setAttribute('data-drag', 'enter');
            }

            //鼠标拖动<拖拽元素>在<拖放目标>上移动时
            //在<拖放目标>上连续触发
            //监听器通过阻止浏览器默认行为设置元素为可拖放元素.
            odrag.ondragover = (e) => {
                e.preventDefault();
            }

            //鼠标拖动<拖拽元素>在<拖放目标>上移动时
            //在<拖拽元素>上连续触发
            //drag

            //鼠标拖动<拖拽元素>移出<拖放目标>时
            //在<拖放目标>上触发
            //此时监听器可以取消掉前面设置的视觉效果
            odrag.ondragleave = (e) => {
                e.preventDefault();
                e.target.setAttribute('data-drag', '');
            }

            //鼠标拖动<拖拽元素>在<拖放目标>上释放时
            //在<拖拽元素>上触发
            //将元素从浏览器拖放到操作系统时不会触发此事件
            //dragend

            //鼠标拖动<拖拽元素>在<拖放目标>上释放时
            //在<拖放目标>上触发
            //此时监听器需要收集数据并且执行所需操作
            //如果是从操作系统拖放文件到浏览器，需要取消浏览器默认行为
            odrag.ondrop = (e) => {
                e.preventDefault();
                let fileObj = e.dataTransfer.files[0];
                console.log(fileObj);
            }
        }