元素拖拽移动与拖拽文件上传及预览

摘要：测试环境在线演示所有代码与讲解代码拖拽元素被拖拽元素设置放置被拖拽元素拖拽上传文件两种图片预览方式代码元素拖动代码放置区必须设置和事件如下代码为直接获取在设置的字符串设置拖拽时的图标这里的对象要先设置，如果在事件中设置无效

created at 2019-08-05

测试环境： win 10, chrome 76.0.3809.87

codepen在线演示

拖拽元素

    
被拖拽元素设置draggable="true"
    
    



拖拽上传文件


两种图片预览方式

/*
  @des 元素拖动代码
*/
const dragEle = document.querySelector("#drag");
/* @des 放置区必须设置 ondragover和 ondrop 事件 */
const dropEle = document.querySelector(".drop");

dragEle.addEventListener("drag", function (event) {
    console.log("drag");
    event.preventDefault();
})

dropEle.addEventListener("drop", function (event) {
    console.log("drop", event.target.className);
    event.preventDefault();
    if (event.target.className === "drop") {
        event.target.appendChild(document.getElementById(event.dataTransfer.getData("dragId")));
        /* @des 如下代码为直接获取在dragstart设置的html字符串 */
        // event.target.innerHTML = event.dataTransfer.getData("ele");
    }
})

/* @des 设置拖拽时的图标,dataTransfer.setDragImage(img, xOffset, yOffset); 这里的img对象要先设置，如果在事件中设置无效，图片加载不及时*/
const img = new Image();
img.src = "./101.png";

dragEle.addEventListener("dragstart", function (event) {
    console.log("drag start");
    /* 
        @des 可以在开始拖拽事件中设置一些数据项，数据的类型为MIME，示例如下 
        event.dataTransfer.setData("text/plan", "id value")
        event.dataTransfer.setData("text/html", " 
123456
")
        text/uri-list，Text，
        设置的键值也可以是其它任意变量名（a，b，c等）
        .....
    */
    event.dataTransfer.setData("dragId", event.target.id);
    event.dataTransfer.setData("ele", "你好");
    event.target.style.opacity = 1;
    event.dataTransfer.setDragImage(img, 10, 10);

    /*
        @des 设置拖动模式,copy,move,link
    */
    event.dataTransfer.dropEffect = "copy";
})

dropEle.addEventListener("dragover", function (event) {
    console.log("drag over");
    event.preventDefault();
})

dragEle.addEventListener("dragend", function (event) {
    console.log("drag end");
    event.target.style.opacity = "";
})

dragEle.addEventListener("dragenter", function (event) {
    event.preventDefault();
    console.log("drag enter");
})

/* 
    @des 拖动上传文件代码 
*/
const dropFile = document.querySelector("#dropFile");

dropFile.addEventListener("dragover", function (event) {
    event.preventDefault();
})
dropFile.addEventListener("drop", function (event) {
    // 一定要禁用浏览器默认事件，不然会在新窗口打开文件
    event.preventDefault()
    const file = event.dataTransfer.files;
    console.log(file);
    const reader = new FileReader();

    /* @des text 文本不能与图片文件一同上传，否则回报busy reading Blobs */
    for (let i = 0; i < file.length; i++) {
        /* @des 处理文件为text文本 */
        if(/txt/.test(file[i].name)) {
            reader.readAsText(file[i], "utf-8");
            reader.onload = function(e) {
                const preEle = document.createElement("pre");
                preEle.innerHTML = e.target.result;
                document.querySelector("#dropResult").appendChild(preEle);
            }
        }
        /* @des 第一种预览图片方式 */
        if(/(jpg|png)/.test(file[i].name)) {
            reader.readAsDataURL(file[i])
            console.log(file[i]);
            reader.onload = function(e) {
                const imgEle = document.createElement("img");
                imgEle.src = e.target.result;
                document.querySelector("#dropResult").appendChild(imgEle);
            }
        }
        /* @des 第二种预览图片方式 */
        if(/(jpeg)/.test(file[i].name)) {
            const imgEle = document.createElement("img");
            const url = window.URL.createObjectURL(file[i]);
            imgEle.src = url;
            document.querySelector("#dropResult").appendChild(imgEle);
        }
    }
})

h3 {
    padding: 5px;
    border-left: 3px solid rgb(190, 189, 189);
    color: rgb(161, 161, 161);
    background-color: rgb(231, 231, 231);
}

.drag-drop-container {
    color: #fff;
    text-align: center;
}

.drag {
    display: inline-block;
    width: 360px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgb(40, 198, 247);
}

.drop {
    margin: 10px auto;
    width: 360px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: rgb(8, 130, 245)
}

.drop-file {
    margin: 10px auto;
    width: 300px;
    height: 300px;
    border: dotted 1px rgb(201, 200, 200);
    background-color: rgb(248, 248, 248);
}
#dropResult{
    text-align: center;
}
#dropResult img{
    margin: 10px;
    width: 100px;
}

参考:

拖拽

URL

欢迎交流 Github