ondrag事件在元素或者选取的文本被拖动时触发

在拖动目标上触发事件（源元素）：

ondragstart：用户开始拖动元素时触发
ondrag：元素正在拖动时触发
ondragend：用户完成元素拖动后触发

2.释放目标时触发的事件

ondragenter:当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover：当某被拖动的对象在另一对象容器范围内时触发此事件
ondragleave：当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop：在一个拖动过程中，释放鼠标键时触发此事件

在拖动元素时，每隔350ms会触发ondrag事件

 <script>
        // 阻止浏览器默认的一些事件
        // 对于drop，防止浏览器的默认处理数据（在drop中链接是默认打开）
        document.addEventListener("drop", function (e) {
            e.preventDefault();
        });
        // 拖动离开事件
        document.addEventListener("dragleave", function (e) {
            e.preventDefault();
        });
        // 拖动完成后触发
        document.addEventListener("dragenter", function (e) {
            e.preventDefault();
        })
        document.addEventListener("dragover", function (e) {
            e.preventDefault();
        });
        var box = document.getElementById("drop_area");
        box.addEventListener("drop", function (e) {
            console.log(e);
            var fileList = e.dataTransfer.files;//获取文件对象
            // 检测是否是拖拽文件到页面的操作
            if (fileList.length == 0) {
                return;
            }
            // 拖拉图片到浏览器可以实现预览功能
            // 规定视频格式
            Array.prototype.S = String.fromCharCode(2);
            Array.prototype.in_array = function (e) {
                console.log(e);//video/mp4
                var r = new RegExp(this.S + e + this.S);
                console.log(this.S);
                return (r.test(this.S + this.join(this.S) + this.S));
            };
            var video_type = ["video/mp4", "video/ogg"];
            // 创建一个url连接，供src属性引用
            var fileurl = window.URL.createObjectURL(fileList[0]);
            if (fileList[0].type.indexOf('image') === 0) {
                // indexOf表示找到的第几位，不存在就返回-1，存在就返回对应的index值
                console.log(fileList[0].type.indexOf('image'));
                // 如果是图片
                var str = "<img width='400px' height='400px' src='" + fileurl + "'>";
                document.getElementById('drop_area').innerHTML = str;
            } else if (video_type.in_array(fileList[0].type)) {
                console.log(fileList[0].type);
                // 如果是规定格式内的视频
                var str = "<video width='400px' height='400px' controls='controls' src='" + fileurl + "'></video>";
                document.getElementById("drop_area").innerHTML = str;
            } else {
                // 其他格式，输出文件名
                console.log(fileList);
                var str = "文件名字：" + fileList[0].name;
                document.getElementById("drop_area").innerHTML = str;
            }
            resultFile = fileList[0];
        }, false);
    </script>