Как не допускать, чтобы дочерние элементы мешали событиям перетаскивания и удаления HTML5?

Question

У меня есть <div> цель падения, к которой я привязал события «drop» и «dragover». <div> содержит изображение внутри метки привязки (упрощенно: <div><a><img /></a></div>). Дочерние элементы цели, похоже, блокируют события «drop» или «dragover» от запуска. Только когда перетаскиваемый элемент находится над мишенью, но НЕ над его дочерними элементами, оба события запускаются, как ожидалось.

Поведение, которое я хотел бы достичь, заключается в том, что события «dragover» и «drop» запускаются где угодно над целевым <div>, независимо от наличия дочерних элементов.

Answer 1

Что-то еще должно происходить с вашим кодом. Я издевался до простого примера здесь:

http://jsfiddle.net/M59j6/6/

и вы можете увидеть, что дочерние элементы не мешают события.

Answer 2

Перетаскивание & Спецификация падения серьезно испорчена и довольно трудно работать.

Отслеживание дочерних элементов позволяет достичь ожидаемого поведения (дочерних элементов не мешает).

Ниже приведен краткий пример того, как это сделать (с JQuery):

jQuery.fn.dndhover = function(options) { 
    return this.each(function() { 
    var self = jQuery(this); 
    var collection = jQuery(); 

    self.on('dragenter', function(event) { 
     if (collection.size() === 0) { 
     self.trigger('dndHoverStart'); 
     } 

     collection = collection.add(event.target); 
    }); 

    self.on('dragleave', function(event) { 
     collection = collection.not(event.target); 

     if (collection.size() === 0) { 
     self.trigger('dndHoverEnd'); 
     } 
    }); 
    }); 
}; 

jQuery('#my-dropzone').dndhover().on({ 
    'dndHoverStart': function(event) { 
    jQuery('#my-dropzone').addClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    }, 
    'dndHoverEnd': function(event) { 
    jQuery('#my-dropzone').removeClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    } 
}); 

Кредиты: 'dragleave' of parent element fires when dragging over children elements

Answer 3

Несколько наклонные к первоначальному вопросу, но я гугл моего пути здесь интересен следующему :

Как мне сделать <img />, который является дочерним элементом <div draggable="true">...</div> контейнера, правильно вести себя в качестве ручки Wi th, который должен переместить этот контейнер?

Простой: <img src="jake.jpg" draggable="false" />

Answer 4

Вы можете отключить указатель событий в CSS для всех детей.

.targetDiv * { 
    pointer-events: none; 
}