Проблема, с которой я сталкиваюсь, заключается в том, что событие dragleave
элемента запускается при зависании дочернего элемента этого элемента. Кроме того, dragenter
не запускается при повторном возврате родительского элемента.
Я сделал упрощенную скрипту: http://jsfiddle.net/pimvdb/HU6Mk/1/.
HTML:
<div id="drag" draggable="true">drag me</div>
<hr>
<div id="drop">
drop here
<p>child</p>
parent
</div>
со следующим 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
, dragleave
будет запущен, а div
больше не будет красным. Возврат к капле div
также не делает его снова красным. Необходимо полностью переместиться из капли div
и снова вернуться к нему, чтобы сделать его красным.
Можно ли предотвратить стрельбу dragleave
при перетаскивании в дочерний элемент?
2017 Обновление: TL; DR, просмотрите CSS pointer-events: none;
, как описано в @H.D. ниже, что работает в современных браузерах и IE11.