How to cancel a drag (on dragenter)-CodePudding

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);

CodePudding user response：

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>

CodePudding user response：

You can do it setting to false the "draggable" attribute of your specific div when the "dragenter" event happens:

In HTML:

        <!-- Element you want to drag-->
        <div id="specificDiv" draggable="true"></div>
        <!-- Element which cancels the drag on enter -->
        <div id="renderCanvas"></div>

In JS:

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