Question

W3School示例（https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondrag_all）最能证明这个问题。

该代码演示了拖放示例。＆＃34;拖我！＆＃34;左侧框中的文本可以拖动到右侧和左侧框中。当超过目标时，该框会出现红色虚线框。当框外时框架消失。不幸的是，当拖过该框内的子元素时，框架也会消失，尽管文本可以正确地放在那里。

然而，我的解决方案也无效。

// 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 = "";
        }
    }
});

Answer 1

我通过修改GitaarLAB的答案找到了答案。以下代码列出了改进的W3Schools示例。

我修改了事件处理程序＆＃34; dragenter＆＃34;，＆＃34; dragleave＆＃34;，＆＃34; dragover＆＃34;和＆＃34; drop＆＃34;使用GitaarLAB函数查找droptarget父级。

＆＃13;

<!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>

＆＃13;

拖动子元素时如何保留droptarget标记

1 个答案: