摘要：測試環境在線演示所有代碼與講解代碼拖拽元素被拖拽元素設置放置被拖拽元素拖拽上傳文件兩種圖片預覽方式代碼元素拖動代碼放置區必須設置和事件如下代碼為直接獲取在設置的字符串設置拖拽時的圖標這里的對象要先設置，如果在事件中設置無效

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