HTML5 dragleave срабатывает при наведении курсора на дочерний элемент
Моя проблема заключается в том, что событие dragleave элемента запускается при наведении курсора на дочерний элемент этого элемента. Кроме того, dragenter не запускается при повторном наведении курсора на родительский элемент.
Я сделал упрощенную скрипку: http://jsfiddle.net/pimvdb/HU6Mk/1/ .
HTML:
drag me
drop here
child
parent
со следующим кодом JavaScript:
$('#drop').bind({
dragenter: function() {
$(this).addClass('red');
},
dragleave: function() {
$(this).removeClass('red');
}
});
$('#drag').bind({
dragstart: function(e) {
e.allowedEffect = "copy";
e.setData("text/plain", "test");
}
});
Предполагается, что он уведомляет пользователя, делая перетаскивание div красным при перетаскивании чего-либо туда. Это работает, но если вы перетащите в дочерний элемент p , активируется драглейв и div больше не красный. Возвращение к падению div также не делает его снова красным. Необходимо полностью выйти из капли div и снова перетащить в него, чтобы сделать его красным.
Можно ли предотвратить срабатывание dragleave при перетаскивании в дочерний элемент ?
Обновление 2017 г .: TL; DR, найдите CSS указатель-события: нет; , как описано в ответе @ HD ниже, который работает в современных браузерах и IE11.
2 ответа
Решенный..!
Объявляют любой массив для исключая:
targetCollection : any[]
dragenter: function(e) {
this.targetCollection.push(e.target); // For each dragEnter we are adding the target to targetCollection
$(this).addClass('red');
},
dragleave: function() {
this.targetCollection.pop(); // For every dragLeave we will pop the previous target from targetCollection
if(this.targetCollection.length == 0) // When the collection will get empty we will remove class red
$(this).removeClass('red');
}
Никакая потребность волноваться о дочерних элементах.
Вот мое решение ( https://jsfiddle.net/42mh0fd5/8):
<div id="droppable">
<div id="overlay"></div>
<a href="">test child 1</a>
<br /><br />
<button>test child 2</button>
<br /><br />
<button>test child 3</button>
<br />
</div>
<p id="draggable" draggable="true">This element is draggable.</p>
<script type="text/javascript">
var dropElem = document.getElementById('droppable');
var overlayElem = document.getElementById('overlay');
overlayElem.addEventListener('drop', function(ev) {
ev.preventDefault();
console.log('drop', ev.dataTransfer.files)
overlayElem.classList.remove('dragover')
dropElem.classList.add('dropped')
console.log('drop')
}, false);
overlayElem.addEventListener('dragover', function(ev) {
ev.preventDefault();
}, false);
overlayElem.addEventListener('dragleave', function(ev) {
console.log('dragleave')
overlayElem.classList.remove('dragover')
}, false);
dropElem.addEventListener('dragenter', function(ev) {
console.log('dragenter')
overlayElem.classList.add('dragover')
}, false);
</script>
<style>
#draggable{
padding:5px;
background: #fec;
display: inline-block;
}
#droppable{
width: 300px;
background: #eef;
border: 1px solid #ccd;
position: relative;
text-align: center;
padding:30px;
}
#droppable.dropped{
background: #fee;
}
#overlay.dragover{
content:"";
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.2);
border:3px dashed #999;
}
</style>