Hay 2 elementos div que son dos modos de una mesa (mesa auxiliar y mesa central). Cuando el usuario arrastre y suelte la mesa central en el área izquierda, se convertirá en una mesa auxiliar y viceversa.
Aquí uso js para obtener la identificación del elemento arrastrado y la identificación del elemento soltado, luego establezco su opacidad en 0 y 1. Pero el navegador no puede obtener la identificación de los elementos. ¿Cuál es el problema o hay alguna otra manera de hacer esto? [tabla auxiliar][https://drive.google.com/file/d/1GM5eA-AevwqKpYKCGe7vld3OMtRJnvXE/view?usp=sharing]
[video de demostración][https://drive.google.com/file/d/1O8FbfRNudlgdsI_l3cGKqeSmSch03FTN/view?usp=sharing]
<div class="control-bar" ondragover="allowDrop(event)" ondrop="drop(event)"> <div class="sidebar" draggable="true" id="sidebar" ondragstart="drag(event)"></div> </div> <div class="centre" ondragover="allowDrop(event)" ondrop="drop(event)"> <div class="wrapper" id="wrapper" draggable="true" ondragstart="drag(event)"></div> </div>Con js:
function allowDrop(e) { e.preventDefault(); } function drag(e) { e.dataTransfer.setData("text", e.target.id); } function drop(e) { e.preventDefault(); var data = e.dataTransfer.getData("text"); document.getElementById(data).style.opacity = "0"; console.log(e.target.id); document.getElementById(e.target.firstChild).opacity = "1"; }puedes usar mi solucion
<body> <div class="container"> <p class="draggable" draggable="true">1</p> <p class="draggable" draggable="true">2</p> </div> <div class="container"> <p class="draggable" draggable="true">3</p> <p class="draggable" draggable="true">4</p> </div> </body> const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset) { return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY }).element } body { margin: 0; } .container { background-color: #333; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: white; border: 1px solid black; cursor: move; } .draggable.dragging { opacity: .5; }