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.
1. Proceso de arrastrar y soltar 1.1 Evento de arrastreAl arrastrar el elemento arrastrable mientras se mantiene presionado el mouse, se activará en el siguiente orden:
arrastrar inicio -> arrastrar -> arrastrar final
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
1.3 Flujo de eventos completoDesde 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
2. Resuelva el problema de que Firefox no admite arrastrar y soltarSi 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> 3. Resuelva el problema de que la marca de liberación no se muestra al arrastrar elementos al contenedor en Chrome y Opera.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> 4. Resuelve el problema de Firefox abriendo una nueva pestaña al colocarloSi 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.
5. Escribe un pequeño ejemplo completo.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.