Explicación detallada de la operación de arrastrar y soltar nativa de Html5

La función de arrastrar y soltar de H5 se utilizó en el desarrollo de un proyecto reciente. Dado que el proyecto existente utiliza un depósito de la familia VUE, se utiliza el complemento vuedragable, pero todo el proceso es bastante complicado. Así que decidí comenzar a estudiar los principios de arrastrar y soltar de H5 y luego aplicarlos al marco basado en datos. Para implementar operaciones de arrastrar y soltar en H5, se requieren al menos dos pasos: 1) Establecer el atributo arrastrable del elemento del objeto que desea arrastrar y soltar en verdadero (los elementos img y a permiten arrastrar y soltar de forma predeterminada 2) Escritura); y arrastrando el código de manejo de eventos relevantes. Para facilitar las pruebas, primero uso la biblioteca jQuery para completar la función básica de arrastrar y soltar.

Al arrastrar el elemento arrastrable mientras se mantiene presionado el mouse, se activará en el siguiente orden:

arrastrar inicio -> arrastrar -> arrastrar final

1. dragstart: se activa cuando se presiona el mouse y se comienza a arrastrar (se activa una vez)
2. arrastrar: se activa mientras se mantiene presionado el mouse y se arrastra (se activa continuamente)
3. dragend: se activa después de soltar el mouse (ya sea que el elemento se coloque en un destino de ubicación válido o en un destino de ubicación no válido)

Cuando el elemento arrastrable se arrastra al contenedor, se activará en el siguiente orden:

dragenter -> dragover -> soltar

dragenter: siempre que se arrastre un elemento al destino de colocación, se activará el evento dragenter.

dragover: dragenter es seguido por el evento dragover, y este evento continuará activándose mientras el elemento arrastrado todavía se mueva dentro del rango del objetivo de colocación.

dragleave: cuando el elemento se arrastra fuera del destino de ubicación, se activará dragleave.

soltar: se activa cuando el elemento arrastrado se coloca en el elemento de destino

Desde comenzar a arrastrar el elemento hasta colocarlo en el área de destino, se activará en el siguiente orden:

arrastrar inicio->arrastrar->dragenter->dragover->dragleave->soltar->dragend

Si agregamos directamente el atributo arrastrable a un elemento, se puede arrastrar directamente en Chrome y Opera (no hay ninguna operación de liberación (como que la flecha cambie a un signo +)), pero no hay respuesta en Firefox.

 <ul class=canDrog> <li draggable=true id=1>Excelente</li> <li draggable=true id=2>Bueno</li> <li draggable=true id=3>Medio</li> <li draggable=true id=4>Pobre</li> </ul> <script> //Sin código JS</script>

Para resolver este problema, debe vincular el controlador de eventos dragstart al elemento de arrastre y llamar a la función event.dataTransfer.setData en esta función.

 <script> <ul class=canDrog> <li draggable=true id=1>Excelente</li> <li draggable=true id=2>Bueno</li> <li draggable=true id=3>Medio</li > <li draggable=true id=4>Diferencia</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox Debe acceder al objeto dataTransfer utilizado para la comunicación de arrastrar y soltar event.dataTransfer.setData(Text,'1');</script>

El logotipo liberable puede ser diferente según el sistema operativo. En Mac Chrome, aparece como un logotipo circular con un '+' blanco incrustado.

La solución es vincular el evento dragover al contenedor.

 <ul class=canDrog> <li draggable=true id=1>Excelente</li> <li draggable=true id=2>Bueno</li> <li draggable=true id=3>Medio</li> <li draggable=true id=4>Diferencia</li> </ul> <table class=dataTbl> <thead> <tr> <th estilo=ancho: 10%>Sección/semana</th> <th>Lunes</th> <th>Martes</th> <th>Miércoles</th> <th>Jueves</th> <th>Viernes</th> </tr> </thead> <tbody > <tr> <td>Sección 1</td> <td draggable=true ></td> <td draggable=true ></td> <td draggable=true ></td> <td draggable=true >< /td> <td draggable=true >>td> </tr> <!--Omitido aquí--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( event){ //firefox debe acceder al objeto dataTransfer utilizado para la comunicación de arrastrar y soltar event.dataTransfer.setData(Text,'1'); Chrome y Opera necesitan agregar $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script>

Si suelta el elemento arrastrado cuando usa Firefox, el navegador predeterminado abrirá una nueva pestaña, de la siguiente manera

Esto se debe a que el navegador ejecuta el comportamiento predeterminado después de la función de devolución de llamada. La solución habitual es agregar código que impida la ejecución del evento predeterminado y evite la propagación en el gancho de colocación del contenedor de arrastre.

 <script> //Liberar el elemento en el elemento actual $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault (); evento.stopPropagation();

Sin embargo, si los elementos que se pueden arrastrar se arrastran a otros lugares, el problema de abrir nuevas pestañas aún ocurrirá. En este caso, el código anterior se puede agregar a todos los contenedores.

Código fuente: https://github.com/pluslicy/drag

Más adelante, estudiaremos la biblioteca de complementos vuedraggable y la aplicaremos en el marco de vue.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.