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

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

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

Ответ 1

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

Как создать <img />, являющийся дочерним элементом контейнера <div draggable="true">...</div>, правильно вести себя как дескриптор перемещения этого контейнера?

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

Ответ 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" родительского элемента срабатывает при перетаскивании дочерних элементов

Ответ 3

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

.targetDiv * {
    pointer-events: none;
}

Ответ 4

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

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

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