Tengo una cuadrícula CSS y estoy tratando de implementar una función de arrastrar y soltar (o arrastrar e intercambiar). Se está acercando a funcionar como se desea, pero como dice el título, la celda arrastrada no caerá correctamente en una celda a la izquierda de su posición original. La función solo funciona cuando la celda que se arrastra se mueve hacia la derecha. ¿Alguien puede ver cuál es el problema?
var dragSrcEl = null; function handleDragStart(e) { this.style.opacity = "0.4"; dragSrcEl = this; e.dataTransfer.effectAllowed = "move"; } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = "move"; return false; } function handleDragEnter(e) { this.classList.add("over"); } function handleDragLeave(e) { this.classList.remove("over"); } function handleDrop(e) { if (e.stopPropagation) { e.stopPropagation(); } if (dragSrcEl != this) { this.replaceWith(this, dragSrcEl); } return false; } function handleDragEnd(e) { this.style.opacity = "1"; items.forEach(function (item) { item.classList.remove("over"); }); } let items = document.querySelectorAll(".grid-container .grid-item"); items.forEach(function (item) { item.addEventListener("dragstart", handleDragStart, false); item.addEventListener("dragenter", handleDragEnter, false); item.addEventListener("dragover", handleDragOver, false); item.addEventListener("dragleave", handleDragLeave, false); item.addEventListener("drop", handleDrop, false); item.addEventListener("dragend", handleDragEnd, false); }); .grid-container { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(4, 30px); margin: auto; } .grid-item { border: 1px solid #666; background-color: #ddd; cursor: move; } .grid-item.over { border: 3px dotted #666; } [draggable] { user-select: none; } <!DOCTYPE html> <head> <body> <div class="grid-container" id="grid"> <div draggable="true" class="grid-item" id="box1">1</div> <div draggable="true" class="grid-item" id="box2">2</div> <div draggable="true" class="grid-item" id="box3">3</div> </div>He agregado seis elementos de cuadrícula más a su código, por lo que en mi código de muestra la cuadrícula es de tres por tres.
Ahora, cuando arrastra un elemento de la cuadrícula, puede ver claramente que no se está realizando ningún intercambio en ninguna dirección. Por ejemplo, arrastre el artículo 9 y suéltelo en el 2. El nuevo orden será:
1 2 9 3 4 5 6 7 8 and not 1 9 3 4 5 6 7 8 2 as expected if swapping took placeSu código está insertando el elemento arrastrado a una nueva posición y barajando el resto de los elementos.
Eche un vistazo a la respuesta a la siguiente pregunta para una implementación de intercambio de arrastrar y soltar
var dragSrcEl = null; function handleDragStart(e) { this.style.opacity = "0.4"; dragSrcEl = this; e.dataTransfer.effectAllowed = "move"; } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = "move"; return false; } function handleDragEnter(e) { this.classList.add("over"); } function handleDragLeave(e) { this.classList.remove("over"); } function handleDrop(e) { if (e.stopPropagation) { e.stopPropagation(); } if (dragSrcEl != this) { this.replaceWith(this, dragSrcEl); } return false; } function handleDragEnd(e) { this.style.opacity = "1"; items.forEach(function(item) { item.classList.remove("over"); }); } let items = document.querySelectorAll(".grid-container .grid-item"); items.forEach(function(item) { item.addEventListener("dragstart", handleDragStart, false); item.addEventListener("dragenter", handleDragEnter, false); item.addEventListener("dragover", handleDragOver, false); item.addEventListener("dragleave", handleDragLeave, false); item.addEventListener("drop", handleDrop, false); item.addEventListener("dragend", handleDragEnd, false); }); .grid-container { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(4, 30px); margin: auto; } .grid-item { border: 1px solid #666; background-color: #ddd; cursor: move; } .grid-item.over { border: 3px dotted #666; } [draggable] { user-select: none; } <!DOCTYPE html> <head> <body> <div class="grid-container" id="grid"> <div draggable="true" class="grid-item" id="box1">1</div> <div draggable="true" class="grid-item" id="box2">2</div> <div draggable="true" class="grid-item" id="box3">3</div> <div draggable="true" class="grid-item" id="box4">4</div> <div draggable="true" class="grid-item" id="box5">5</div> <div draggable="true" class="grid-item" id="box6">6</div> <div draggable="true" class="grid-item" id="box7">7</div> <div draggable="true" class="grid-item" id="box8">8</div> <div draggable="true" class="grid-item" id="box9">9</div> </div>