元素拖拽移動與拖拽文件上傳及預覽

created at 2019-08-05

• 測試環境： win 10, chrome 76.0.3809.87

• codepen在線演示

全部代碼與講解

html代碼

<h3>拖拽元素</h3>
<div class="drag-drop-container">
    <div class="drag" id="drag" draggable="true">被拖拽元素設置draggable="true"</div>
    <!-- 放置被拖拽元素 -->
    <div class="drop"></div>
</div>

<h3>拖拽上傳文件</h3>
<div class="drop-file" id="dropFile"></div>

<h3>兩種圖片預覽方式</h3>
<div id="dropResult"></div>

js代碼

/*
  @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', ' <div class="drag-box">123456</div>')
        text/uri-list，Text，
        設置的鍵值也能夠是其它任意變量名（a，b，c等）
        .....
    */
    event.dataTransfer.setData('dragId', event.target.id);
    event.dataTransfer.setData('ele', '<em>你好</em>');
    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);
        }
    }
})

css代碼

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