O problema que estou tendo é que odragleave evento de um elemento é acionado ao passar o mouse sobre um elemento filho desse elemento. Além disso,dragenter não é acionado ao passar novamente o elemento pa

Eu fiz um violino simplificado: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>

com o seguinte 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");
                 }
                });

O que se deve fazer é notificar o usuário fazendo o dropdiv vermelho ao arrastar algo para lá. Isso funciona, mas se você arrastar para op criança, odragleave é disparado e odiv não é mais vermelho. Voltando ao dropdiv também não fica vermelho novamente. É necessário sair completamente da gotadiv e arraste-o novamente para torná-lo vermelho.

É possível evitardragleave de disparar ao arrastar para um elemento filho?

Atualização de 2017: TL; DR, consulte CSSpointer-events: none;, conforme descrito na resposta da H.D. abaixo, que funciona em navegadores modernos e no IE1