Драглэйв стреляет по внутренним детям - PullRequest
Новая
       36

Драглэйв стреляет по внутренним детям

0 голосов
/ 15 мая 2018

Я пытаюсь использовать перетаскивание HTML5 и создать перетаскиваемый контейнер, чтобы изменить его стиль, когда над ним находится перетаскиваемый элемент.проблема состоит в том, что если перетаскиваемый контейнер содержит внутренние элементы, запускаются события перетаскивания, в результате чего контейнер теряет свой стиль.

, как вы можете видеть, когда перетаскиваемый элемент попадает внутрь небольшого зеленого прямоугольника.мы теряем красную границу внешнего div. 

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

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Вы должны игнорировать "dragleave" события, которые срабатывают для элементов, содержащихся в "droptarget" (например, "inner-droptarget").

Для этого вы можете определить, было ли событие запущено изпотомок области падения.Ваш обработчик будет выглядеть так: 

function dragLeave(event) {
    if ( event.target.className == "droptarget" ) && !($('.droptarget').contains(event.fromElement) {
        event.target.style.border = "";
    }
}
0 голосов
/ 15 мая 2018

Когда вы вводите внутренний 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>
...