Как управлять всплытием drag & drop событий в html5?

Question

[phil_b]

Похожий вопрос без решения: toster.ru/q/14633

Пример:
html (в вакууме)

<div drop_area>
    <div draggable>
         <div draggable_too></div>
    </div>
</div>

Т.е. у 2-х элементов одна область «посадки», но должны быть разные действия при драггинге внутреннего и внешнего элемента. При этом если тащить за внутренний — событие всплывает до внешнего и уже отрабатывает он.

Comments

[phil_b]

Сейчас происходит вот, что (на основе «вакуумного html»):

$("[drop_area]").on("drag", function(e){  // или любое другое Drag & Drop htm5 событие
		console.log(e);
	})

при драгге за draggable_too

e.target: draggable
e.currentTarget: drop_area
e.delegateTarget: drop_area
e.originalEvent: DragEvent
e.originalEvent.type: drag
e.originalEvent.currentTarget: null
e.originalEvent.originalTarget: draggable
e.originalEvent.target: draggable

Answer 1

[phil_b]

Вопрос закрыт, т.к. проблема имела место быть частично из-за моей невнимательности.
Решение:
У каждого, пусть и вложенного drag элемента должны быть прописаны draggable="true"
Используете запись вида

$("[draggable]").on("dragstart", "[draggable_too]", function(e){
     e.stopPropagation();
     e.dataTransfer.setData("type_control", literal_string);
});

При этом присваиваете разные идентификаторы для draggable и draggable_too и при обработке события drop в зависимости от идентификатора выполняете нужные действия.

Answer 2

[Артур Смирнов]

Мне кажется, может помочь делегирование событий. Вешайте событие на самый корневой элемент (в примере - drop_area), слушайте все, что до него доплывает, и применяйте разные обработчики для разных event.target
Подробнее о делегировании событий в JS

Comments

[phil_b]

Стандартные события в JS так и работают, да.
DnD как-то иначе похоже, — сделал приписку в вопросе