Consejos prácticos de JavaScript: arrastrar y soltar eventos, arrastrar y soltar imágenes en la página

HTML5 ha agregado un evento de arrastre, que se puede usar para arrastrar y soltar archivos externos en la página, y puede realizar lectura de archivos, carga y otras funciones.

Drag , también conocido como drag, drag, drag en inglés .

El evento de arrastre es una nueva operación de evento en HTML5.

Arrastrar y soltar es cuando el usuario mantiene presionado el botón del mouse sobre un objeto, lo arrastra a otra ubicación (otra pestaña) y luego suelta el botón del mouse para soltar el objeto allí.

• Objeto a arrastrar : el contenido arrastrado por el mouse, que pueden ser etiquetas, imágenes, texto, etc.

• Contenedor : La nueva ubicación donde se almacena el objeto arrastrado.

Hay varios tipos de objetos para arrastrar, incluidos nodos de etiquetas, imágenes, enlaces, texto seleccionado, etc. En las páginas web, a excepción de los nodos de etiquetas, que no se pueden arrastrar y soltar de forma predeterminada , otros ( imágenes <img>, hipervínculos <a>, texto seleccionado ) se pueden arrastrar y soltar directamente.

Para hacer que el nodo de la etiqueta se pueda arrastrar, draggablela propiedad establecer en true.

<div class="small" draggable="true">
   可拖动区域
</div>

Después de definir draggablelas propiedades, puede definir el evento de arrastre para la etiqueta.

Nota: El evento drag no es compatible con el evento mousemove, solo se puede usar uno de ellos.

1. Eventos relacionados con el objeto arrastrado

Arrastrar y soltar se compone de dos partes: arrastrar y soltar, y el evento de arrastrar también se divide en: eventos relacionados del objeto arrastrado y eventos relacionados del contenedor .

• Eventos relacionados del objeto arrastrado

evento	describir
inicio de arrastre	Se activa cuando el usuario comienza a arrastrar un elemento. Por lo general, en la función de escucha de este evento, especifique los datos arrastrados .
arrastrar	Se activa cuando se arrastra el elemento . Durante el proceso de arrastre, dispare continuamente en el nodo arrastrado (cada pocos cientos de milisegundos)
que lleva	Se activa cuando el usuario termina de arrastrar un elemento . Independientemente de si el arrastre se realiza a través de las ventanas o se cancela a mitad de camino, dragendel evento siempre se activará.

El siguiente ejemplo muestra cómo cambiar dinámicamente el color de fondo del nodo arrastrado.

<div id="box" class="box" draggable="true">
</div>
<script>
    let box = document.getElementById("box");
    box.addEventListener("dragstart",function (e) {
        e.target.classList.add("dragging");
    });
    box.addEventListener("dragend",function (e) {
        e.target.classList.remove("dragging");
    });
</script>

 

Al div#boxser arrastrado, se convertirá en un fondo amarillo. Cuando termina el arrastre, vuelve a cambiar a un fondo rojo.

2. Eventos relacionados con contenedores

• Eventos relacionados con contenedores

evento	describir
transportador	Este evento se activa cuando el objeto arrastrado por el mouse ingresa a los límites de su contenedor . Por lo general, en la función de escucha de este evento, especifique si desea permitir que los datos arrastrados se suelten en el nodo actual . Si el nodo actual no tiene una función de escucha para el evento , o la función de escucha no realiza ninguna operación, significa que no se permite colocar datos en el nodo actual . Muestre visualmente el arrastrar y soltar en el nodo actual, que también se establece en la función de escucha de este evento.
arrastre	Este evento se activa cuando el objeto que se arrastra se arrastra dentro de los límites de otro contenedor de objetos . dragenterEl evento se activa al ingresar al nodo, y mientras no salga del nodo, dragoverel evento continuará activándose .
hoja de arrastre	Este evento se activa cuando el objeto arrastrado por el mouse sale de los límites de su contenedor
gota	Se activa en el nodo contenedor cuando el nodo arrastrado o el texto seleccionado se suelta en el nodo contenedor cuando se suelta el mouse. Tenga en cuenta que si el nodo actual no lo permitedrop , o si el usuario presiona la tecla ESC para cancelar la operación, este evento no se activará . La función de escucha de este evento es responsable de extraer los datos arrastrados y realizar el procesamiento correspondiente .

 Aviso:

• De forma predeterminada, los navegadores evitan que suceda algo que caiga sobre los elementos HTML.

• Para establecer el evento predeterminado en el contenedor (área desplegable) event.preventDefault(), de lo contrario, dropel evento no se activará.

• El evento predeterminado de bloqueo general está escrito en dragoverel dropevento.

El siguiente ejemplo muestra cómo arrastrar un nodo desde el nodo principal actual a otro nodo principal.

<div class="dropzone">
    <div id="box" class="box" draggable="true">
        要拖动的div
    </div>
</div>

<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<script>
    let box = document.getElementById("box");
    let dropzone = document.querySelectorAll(".dropzone");
    box.addEventListener("dragstart",function (e) {
        let _box = this;
        // 开始拖拽的时候，让原来的 div 隐藏，要通过延迟代码执行。
        setTimeout(function () {
            _box.style.opacity = 0;
        },0);
    });
    box.addEventListener("dragend",function (e) {
        // 结束拖拽，原来的div恢复显示。
        e.target.style.opacity = 1;
    });

    dropzone.forEach(function (item,index) {
        item.addEventListener("dragenter",function (e) {
            e.target.classList.add("over");
        });
        item.addEventListener("dragover",function (e) {
            // 阻止默认事件
            e.preventDefault();
        }); 
        item.addEventListener("dragleave",function (e) {
            e.target.classList.remove("over");
        });
        item.addEventListener("drop",function (e) {
            e.preventDefault();  // 阻止默认事件
            // 把 div.box放入对应的div.dropzone 中
            e.target.appendChild(box);
        });
    });
</script>

3. Secuencia de ejecución de eventos de arrastre

1. dragstart (el elemento arrastrado)

2. dragenter (contenedor)

3. dragover (contenedor)

4. dragleave (contenedor)

5. gota (recipiente)

6. dragend (el elemento arrastrado)

Desde dragstartel principio hasta dragendel final, todo el proceso activa continuamente el arrastre (el elemento que se arrastra). Como se muestra en la figura a continuación, solo se reservan los eventos dragstart, drag, dragend.

 

 4. Caso: arrastre y suelte archivos de imagen en la página

(1) preparación

Arrastre y suelte el archivo en la etiqueta div.box de la página. Personaliza el estilo.

 <div class="box" id="box">
        <span>把文件拖放在这里</span>
    </div>

 

debe dragoveragregarse deshabilitar el código de evento predeterminado.

box.addEventListener("dragover",function (e) {
    e.preventDefault();
});

(2) Transferencia de datos.archivos

event.dataTransfer.filesLa propiedad es un objeto FileList , que contiene un conjunto de archivos locales, que se pueden usar para transferir en la operación de arrastre. Si este arrastrar y soltar no involucra archivos, esta propiedad es un objeto FileList vacío.

Puede recorrer FileList o usar el índice para obtener un archivo y obtener el nombre , el tipo, el tamaño y otros atributos del archivo .

let box = document.getElementById("box");
box.addEventListener("dragover",function (e) {
    e.preventDefault();
});
box.addEventListener("drop",function (e) {
    e.preventDefault();
    let file = e.dataTransfer.files[0];
    console.info( e.dataTransfer.files )
    console.info( file )
    console.info( file.name )
    console.info( file.type )
    console.info( file.size )
});

Puede usar el método estático para obtener la ruta del archivo. URL.createObjectURL(file)

(3) Arrastre y suelte una sola imagen en la página

box.addEventListener("drop",function (e) {
    e.preventDefault();
    box.innerHTML = "";
    // 获取文件
    let file = e.dataTransfer.files[0];
    // 获取文件 type
    console.info( file.type );
    // 判断文件是否是图片
    if( /image/.test(file.type)){
        console.info("图片");
    }else{
        box.innerHTML = "请拖入一个图片文件，如png，jpg或者gif";
        return false; // 终止函数运行
    }
    // 生成文件路径
    let url = URL.createObjectURL(file);
    // 创建一个 img 标签
    let img = document.createElement("img");
    img.src = url;
    // 把 img 添加到 box 里。
    box.appendChild(img) 
});

 

(4) Arrastre y suelte varias imágenes en la página

box.addEventListener("drop",function (e) {
    e.preventDefault();
    box.innerHTML = "";
    // 获取文件列表
    let files = e.dataTransfer.files;
    [...files].forEach(function (item,index) {
        // 判断文件是否是图片
        if( /image/.test(item.type)){
            console.info("图片");
            // 生成文件路径
            let url = URL.createObjectURL(item);
            // 创建一个 img 标签
            let img = document.createElement("img");
            img.src = url;
            // 把 img 添加到 box 里。
            box.appendChild(img)
        }else{
            console.info(`文件${index}不是图片`);
        }
    });
});