Usando el navegador Google Chrome, necesito arrastrar y soltar un elemento de un menú, de manera que el menú se cierre/oculte/contraiga/desaparezca/(o algo similar) automáticamente tan pronto como se active el evento dragstart. Esto debe hacerse de tal manera que se libere el espacio DOM, por lo que los enfoques que usan "visibilidad" y "opacidad", por ejemplo, mientras sea posible, no son buenos para esta situación.
En su lugar, es necesario hacer algo como mostrar: ninguno o empujar el menú fuera de la página web (sin barra de desplazamiento). Sin embargo, me he quedado atascado tratando de lograr esto y podría necesitar algo de ayuda (o si se me ocurre un enfoque alternativo que logre lo mismo, hágamelo saber. También probé un enfoque de índice z sin éxito):
Enfoque 1: intentar ocultar el elemento principal del elemento arrastrado a través del posicionamiento absoluto https://jsfiddle.net/gratiafide/4m5r186v/
function dragstart_handler(ev) { ev.dataTransfer.setData("text/plain", ev.target.id); ev.currentTarget.parentElement.style.cssText = "position:absolute; right:-5000px;"; }Enfoque 2: intentar ocultar el elemento principal del elemento arrastrado mediante la configuración de visualización: ninguno https://jsfiddle.net/gratiafide/Luj7d089/
function drag(event) { event.dataTransfer.setData("Text", event.target.id); document.getElementById('parent').style.display = 'none'; }Verá que en ambos enfoques, el elemento arrastrado se suelta en ambos casos tan pronto como la regla CSS se aplica al elemento principal del elemento arrastrado. Solo quiero poder seguir arrastrando el elemento aunque haya ocultado o movido el elemento principal fuera de la vista. ¡Gracias de antemano por tu ayuda!
ok, creo que mi comentario fue incorrecto y que desea eliminar el espacio en la página ocupado por el elemento de origen (en lugar de liberar memoria).
Para lograr esto, agregue document.body.removeChild(document.getElementById('parent')); a su controlador de caída. Hice un js fiddle para demostrar (con el div id=spacer eliminado y un párrafo adicional debajo para mostrar que se eliminó el elemento):
https://jsfiddle.net/dj825rbo/
(revisión después del comentario que aclara que el elemento de origen debería desaparecer cuando comienza el arrastre)
Esto es horrible, pero funciona (horrible porque no puedes ver el texto mientras se arrastra). Se basa en un elemento oculto en el que se almacena el contenido del origen mientras se lleva a cabo el arrastre. Reemplazar el detector de eventos 'drop' con un detector 'mouseup' permite que el contenido de la temperatura (elemento oculto se transfiera al destino donde se soltó el clic del mouse)
Parece que quiere que sus padres desaparezcan arrastrando el elemento de su hijo tal como está.
El elemento secundario está influenciado por el atributo de estilo CSS del elemento principal. Si los padres se borran a través de propiedades css como "display", "visibility" y "opacity", el elemento secundario no es visible incondicionalmente.
Ocultar usando la propiedad "absoluta" (pero no z-index -1) también es una forma, pero pueden ocurrir barras de desplazamiento no deseadas dependiendo del atributo "desbordamiento" del elemento principal, y la posición del elemento secundario debe agregarse al revés y recalcularse .
Como resultado de mi prueba, se produjo un evento dragend en Chrome cuando se volvió a dibujar el elemento principal del elemento que se iba a arrastrar. Pero en Firefox, ambos ejemplos funcionan.
De todos modos, para explicar en función de cómo funciona en Chrome, es separar la relación entre Child y Parent y usarlo como un hermano. Modifique su HTML de la siguiente manera.
<div id='relative_div'> <div id="parent"></div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true">Drag me to the Drop Zone below</p> </div> A continuación, actualice su CSS de la siguiente manera. #parent debería servir como fondo para completar #relative_div .
#relative_div { position: relative; overflow: hidden; width: 200px; height: 100px; padding: 2em; } #parent { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: lightgrey; } #source { position: relative; cursor: grab; color: blue; border: 1px solid black; } Ahora, independientemente de si usa la "posición" de #parent para alejarlo, o si lo oculta usando "display", "opaicty" o "visibility", el arrastre de #source no se detiene.