Question

我正在尝试使用HTML5拖放，并使可拖动容器在可拖动元素覆盖时更改其样式。问题是如果可丢弃容器包含内部元素，则会触发dragleave事件，使容器失去其样式。

正如您所看到的那样，当可拖动元素进入小绿框时。我们失去了外部div的红色边框。

＆＃13;

<html>
<head>
<style>
.droptarget {
   
    width: 100px; 
    height: 100px;
    margin: 15px;
    margin-right: 100px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

.inner-droptarget {
  margin-left: 20px;
  margin-top: 20px;
width: 50px;
height: 50px;
border: 1px solid green
}
</style>
</head>
<body>



<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>


<div class="droptarget" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)">

<div class="inner-droptarget">
</div>
</div>


<script>
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
}

function dragEnter(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
}

function dragLeave(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
}


</script>

<p>
The border of the outside div should remain red even if dragging into the green div!
</p>


</body>
</html>

＆＃13;

Answer 1

在拖动过程中输入内部div时，事件拖动进入然后拖动离开事件正在触发。我们需要一种方法来标记你要离开外部div并进入内部div，这样边框在外部div上保持红色。

我可以让两个边框都变成红色，但当你离开它时，两个边框都会变回绿色。

<body> 
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p> 
<div id="myOuterDiv" class="droptarget" ondragenter="dragEnter1(event)" 
ondragleave="dragLeave1(event)" 
ondrop="drop(event)" 
ondragover="allowDrop(event)"> 
<div id="myInnerDiv" class="inner-droptarget" ondragenter="dragEnter2(event)" 
ondragleave="dragLeave2(event)">
</div>
</div>  
<script>
var inOuter = false;
var inInner = false;
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
}

function dragEnter1(event) { 
    inOuter = true; 
    document.getElementById("myInnerDiv").addEventListener("ondragenter", dragEnter2);
    console.log("entered outer");
    return highlightBorder();
}

function dragLeave1(event) {
console.log("left outer");
    inOuter = false;
    highlightBorder();
    event.preventDefault();
}
function dragEnter2(event) {
    console.log("entered inner");
        inInner = true;
        inOuter = true;
        return highlightBorder();  
        }

function dragLeave2(event) { 
console.log("left inner");
    inInner = false;
    inOuter = true;
    return highlightBorder();

}
function allowDrop(ev) {
    return false;
}
function drop(event) {
var inOuter = false;
var inInner = false;
    document.getElementById("myInnerDiv").style.border ="3px solid green";
    document.getElementById("myOuterDiv").style.border ="3px solid green";
     return false;
}
function highlightBorder() {
if( inInner)
{
    document.getElementById("myInnerDiv").style.border ="3px dotted red"; 
    document.getElementById("myOuterDiv").style.border ="3px dotted red";
    return false;
}
if(!inInner && inOuter)
{
    document.getElementById("myInnerDiv").style.border ="";
    document.getElementById("myOuterDiv").style.border ="3px dotted red";
    return false;
}
 if(!inInner && !inOuter) 
{
    document.getElementById("myInnerDiv").style.border ="";
    document.getElementById("myOuterDiv").style.border ="";
    return false;
}
} 
</script>

<p>
The border of the outside div should remain red even if dragging into the green div!
</p>


</body>
</html>

Answer 2

您必须忽略"dragleave"中包含的元素（例如"droptarget"）上触发的"inner-droptarget"事件。

为此，您可以检测是否从放置区域的后代触发了该事件。您的处理程序将如下所示：

function dragLeave(event) {
    if ( event.target.className == "droptarget" ) && !($('.droptarget').contains(event.fromElement) {
        event.target.style.border = "";
    }
}

dragleave事件正在对内心的孩子开火

2 个答案: