Estoy en javascript clásico y quiero cancelar un arrastre al ingresar en un div específico.
en HTML:
<!-- Element i want to drag --> <div id="draggableElement" draggable="true"></div> <!-- Element which cancels the drag on enter --> <div id="specificDiv"></div>en JS:
document.addEventListener("dragenter", event=> { if (event.target.id == "specificDiv") { // Cancel the drag } }, false);Ya busqué en la web pero no encontré una solución, sin embargo, encontré algunas bibliotecas js pero es demasiado para lo único que quiero hacer.
Gracias por adelantado.
EDITAR :
Más precisamente, quiero, al menos, dejar de mostrar la imagen arrastrada ingresando mi div específico para ver esta.
Así que ya intenté ocultar la imagen arrastrada pero no funciona en dragenter (solo en dragstart).
en JS:
let dragged; document.addEventListener("dragstart", event=> { dragged = event; }, false); document.addEventListener("dragenter", event=> { if (event.target.id == "specificDiv") { // Hide the dragged image or cancel the drag event.dataTransfer.setDragImage(new Image(), 0, 0); // Doesn't work dragged.dataTransfer.setDragImage(new Image(), 0, 0); // Doesn't work too } }, false);De acuerdo, entonces desea ocultar el elemento arrastrado cuando ingresa sobre renderCanvas pero SIN soltar el botón del mouse, ¿estoy en lo correcto?
Si es así, debe saber que no es posible modificar la imagen fantasma de arrastre sin soltar el botón del mouse. En ese caso, puede simular un arrastrar y soltar personalizado y ocultar el elemento arrastrado cuando su posición esté dentro del rango del otro elemento:
let specificDiv = document.getElementById('specificDiv'); let renderCanvas = document.getElementById('renderCanvas'); //Catches target position rect = renderCanvas.getBoundingClientRect(); rectX = rect.left; rectY = rect.top; //Release dragged element let released; document.addEventListener('mouseup', ()=>{ released = true; }) //Drag element specificDiv.addEventListener('mousedown', (ev) => { released = false; specificDiv.addEventListener('mousemove', (e)=>{ if(!released) { //Collects actual mouse position while dragging x = e.clientX y = e.clientY //Moves dragged element specificDiv.style.left = (x-80) + 'px'; specificDiv.style.top = (y-80) + 'px'; //Hides dragged element when is over the other if(y > rectY) { specificDiv.style.opacity="0" } } }) }) #specificDiv { position: relative; background-color: red; height: 10em; width: 10em; } #renderCanvas { background-color: blue; height: 20em; width: 20em; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="css/styles.css" rel="stylesheet"> </head> <body> <!-- Div element you want to drag--> <div id="specificDiv">DRAGGED ELEMENT</div> <!-- Div element who cancels the drag on enter --> <div id="renderCanvas">TARGET ELEMENT</div> <script src="js/main.js"></script> </body> </html>Tendrá que adaptar rectX y rectY a su posición específica de divs.
La siguiente sería una solución para permitir colocar en un div y en otro div no permitir colocar:
function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } const target = document.querySelector("#dragtarget"); const notarget = document.querySelector("#nodragtarget"); const dragged = document.querySelector("#dragitem"); target.addEventListener("dragover", allowDrop); target.addEventListener("drop", drop); dragged.addEventListener("dragstart", drag) div[draggable] { height: 3rem; width: 3rem; background: yellow; } div#dragtarget { height: 5rem; width: 5rem; border: 1px solid green; } div#nodragtarget { height: 5rem; width: 5rem; border: 1px solid red; } <div id="dragitem" draggable="true"></div> <div id="dragtarget"></div> <div id="nodragtarget"></div>te funciono mi respuesta? soy bastante curioso