HTML拖拽API

HTML拖拽API备忘清单

| 事件 |on事件处理程序 | 触发时刻|
|:—- |:————– |:—— |
|drag |ondrag |当拖拽元素或选中的文本时触发|
|dragend |ondragend |当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)|
|dragenter |ondragenter |当拖拽元素或选中的文本到一个可释放目标时触发|
|dragexit |ondragexit |当元素变得不再是拖拽操作的选中目标时触发|
|dragleave |ondragleave |当拖拽元素或选中的文本离开一个可释放目标时触发|
|dragover |ondragover |当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）|
|dragstart |ondragstart |当用户开始拖拽一个元素或选中的文本时触发|
|drop |ondrop |当元素或选中的文本在可释放目标上被释放时触发|

使用

• 在拖拽过程中，可以使用 DataTransfer, DataTransferItem 和DataTransferItemList 来传输与拖拽元素绑定的数据。

• 因此实现一个 HTML 元素的拖拽，一般需要以下几个步骤：

  1. 给想要拖拽的元素设置 draggable 属性为 true
  2. 设置拖拽监听事件来完成自己的需求
  3. 若有需要，在监听事件中设置拖拽数据

示例

<div className="html-drag-container">
    <div id="html-drag-box-container">
        <div class="html-drag-box" draggable="true"></div>
    </div>
    <div id="html-drag-img-container">
        <img class="html-drag-img" src="https://dummyimage.com/600x400/ffd53b/fff.png&text=photo"></img>
    </div>
    
    <div class="html-drop-box"></div>

    <button id="reset-btn">reset</button>
</div>

.html-drag-container {
    height: 70vh;
    background-color: #eee;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
}

#html-drag-box-container {
    grid-row: 2 / 3;
    grid-column: 1/ 2;
}

.html-drag-box {
    width: 10vw;
    height: 12vh;
    background-color: tomato;
    border-radius: 10px;
    position: relative;
}

#html-drag-img-container {
    grid-row: 2 / 3;
    grid-column: 3/ 4;
}

.html-drag-img {
    width: 10vw;
    height: 12vh;
    border-radius: 10px;
    position: relative;
}

.html-drop-box {
    grid-row: 2 / 3;
    grid-column: 2/ 3;
    border: rgb(20, 179, 241) dashed 4px;
    border-radius: 10px;
    width: 14vw;
    height: 18vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.html-drop-box::before {
    display: block;
    content: "请拖放到此区域";
    position: absolute;
    color: rgb(160, 157, 157);
    font-family: sans-serif;
    font-size: 2vh;
}

.html-dropped {
    border-color: rgb(17, 241, 28);
}

.html-dropover {
    border-color: rgb(252, 83, 32);
}
/* 用于限制从本地拖入图片时的大小 */
.html-drop-box img {
    width: 10vw;
    height: 12vh;
    position: relative ;
}

let dragbox = document.getElementsByClassName('html-drag-box')[0];
let dropbox = document.getElementsByClassName('html-drop-box')[0];
let dragimg = document.getElementsByClassName('html-drag-img')[0];
let boxcontainer = document.getElementById('html-drag-box-container');
let imgcontainer = document.getElementById('html-drag-img-container');
let resetBtn = document.getElementById('reset-btn');

dragbox.addEventListener('dragstart', onDragStart);
dragbox.addEventListener('dragend', onDragEnd);

dragimg.addEventListener('dragstart', onDragStart);
dragimg.addEventListener('dragend', onDragEnd);

dropbox.addEventListener('dragover', onDragOver);
dropbox.addEventListener('dragleave', onDragLeave);
dropbox.addEventListener('drop', onDrop);

resetBtn.addEventListener('click', resetElement);

function onDragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.className);
    e.target.style.opacity = .7;
}

function onDragEnd(e) {
    e.target.style.opacity = "";
}

function onDragOver(e) {
    // 默认情况下是不允许放置拖拽元素的，因此需要取消默认设置
    e.preventDefault();
    dropbox.classList.add('html-dropover');
}

function onDragLeave(e) {
    dropbox.classList.remove('html-dropover');
}

function onDrop(e) {
    // 阻止一些默认操作，如拖拽超链接会默认打开页面
    e.preventDefault();
    resetElement();

    dropbox.classList.remove('html-dropover');
    dropbox.classList.add('html-dropped');

    let isFile = false;

    // 若拖拽对象是文件
    [...e.dataTransfer.items].forEach((item) => {
        if (item.kind === "file") {
            const file = item.getAsFile();
            createPreview(file);
            isFile = true;
        }
    });

    if (isFile) return;
    dropbox.appendChild(document.getElementsByClassName(e.dataTransfer.getData('text/plain'))[0]);
}

function createPreview(imageFile) {
    if (!imageFile.type.startsWith("image/")) {
        return;
    }

    const image = document.createElement("img");
        image.src = URL.createObjectURL(imageFile);
        image.onload = function () {
        URL.revokeObjectURL(this.src);
    };
    dropbox.appendChild(image);
}

function resetElement() {
    if (dropbox.classList.contains('html-dropped')) {
        dropbox.classList.remove('html-dropped')
    }
    boxcontainer.appendChild(dragbox);
    imgcontainer.appendChild(dragimg)
}