How keep a droptarget mark when dragging over child element

Question

The issue is best demonstrated with the W3School example (https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondrag_all).

The code demonstrates a drag drop example. The "Drag me!" text in the left box can be dragged to the right and the left box. When over a drop target the box gets a red dotted frame. When outside the box the frame disappears. Unfortunately, the frame also disappears when dragged over a child element within that box although the text can be correctly dropped there.

My solution, however, doesn't work either.

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
    if (( event.target.className == "droptarget" )||(event.target.parentNode.className == "droptarget" )) {
        if ( event.target.className == "droptarget" ){
            event.target.style.border = "3px dotted red";
        }else{
            event.target.parentNode.style.border = "3px dotted red";
        }
    }
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
    if (( event.target.className == "droptarget" )||(event.target.parentNode.className == "droptarget" )) {
        if ( event.target.className == "droptarget" ){
            event.target.style.border = "";
        }else{
            event.target.parentNode.style.border = "";
        }
    }
});

It might be something with you `if` condition try to check it. Have you tried using `ondragover` ? — Krusader, Oct 17 '17 at 08:35

score 0 · Answer 1 · answered Oct 17 '17 at 11:44

I found the answer by modifying GitaarLAB's answer. The following code lists the improved W3Schools example.

I made modifications to the event handlers "dragenter", "dragleave", "dragover", and "drop" using GitaarLAB's function to find the droptarget parent.

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 70px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p>Drag the p element back and forth between the two rectangles:</p>

<div class="droptarget">
  <p>Drop me here!</p>
  <p draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget">
  <p>Drop me here!</p>
</div>


<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>

<p id="demo"></p>

<script>
/* Events fired on the drag target */

document.addEventListener("dragstart", function(event) {
    // The dataTransfer.setData() method sets the data type and the value of the dragged data
    event.dataTransfer.setData("Text", event.target.id);
    
    // Output some text when starting to drag the p element
    document.getElementById("demo").innerHTML = "Started to drag the p element.";
    
    // Change the opacity of the draggable element
    event.target.style.opacity = "0.4";
});

// While dragging the p element, change the color of the output textdragtarget
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "Finished dragging the p element.";
    event.target.style.opacity = "1";
});


/* Events fired on the drop target */

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
 var c = event.target;
    while(c.className !== "droptarget"&&(c=c.parentNode)); 
    if ( !!c ) {
        c.style.border = "3px dotted red";
    }
});

// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
    event.preventDefault();
 var c = event.target;
    while(c.className !== "droptarget"&&(c=c.parentNode)); 
    if ( !!c ) {
        c.style.border = "3px dotted red";
    }
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
 var c = event.target;
    if ( c.className == "droptarget" ) {
        c.style.border = "";
    }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
   Reset the color of the output text and DIV's border color
   Get the dragged data with the dataTransfer.getData() method
   The dragged data is the id of the dragged element ("drag1")
   Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
 var c = event.target;
    while(c.className !== "droptarget"&&(c=c.parentNode)); 
    if ( !!c ) {
        document.getElementById("demo").style.color = "";
        c.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});
</script>

</body>
</html>

How keep a droptarget mark when dragging over child element

1 Answers1