How to cancel a drag (on dragenter)

user_18332101 0
Viewed 415

I'm on classic javascript and i want to cancel a drag on enter in a specific div.

in HTML :

<!-- Element i want to drag -->
<div id="draggableElement" draggable="true"></div>

<!-- Element which cancels the drag on enter -->
<div id="specificDiv"></div>

in JS :

document.addEventListener("dragenter", event=> {
    if (event.target.id == "specificDiv") {
        // Cancel the drag
    }
}, false);

I already search on the web but i didn't find a solution, however i found some js libraries but it's too much for the only thing i want to do.

Thanks by advance.

EDIT :

More precisly i want, at least, undisplay the draged image by entering in my specific div to see this one.

So i've already tried to hide the draged image but it doesn't work on dragenter (only in dragstart).

in 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);
html javascript
3 Answers

Okay so you want to hide the dragged element when enters over renderCanvas but WITHOUT releasing mouse button am I right?

If so, you have to know that is not possible to modifying drag-ghost-image without releasing mouse button. In that case you can simulate a custom Drag&Drop and hide the dragged element when its position is in range with the other element:

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>

You'll have to adapt rectX and rectY to your specific divs position.

user_176661430

The following would be a solution to allow dropping on a div and on another div don't allow dropping:

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>

user_177979070

did my answer worked for you? I am quite curious

user_176661430
Related