As the title states I want to disable the "dragging" event for children of a draggable parent element. this might sound like a simple question but I tried different approaches without success. What I tried so far (nothing worked):
event.target or similar data to find the children and stop it (I can't find the children)z-index to 0 in cssHere is my code example. You have to drag/drop the elements into the field first. When you write something in the new input fields and try to highlight it, the dragging event will be fired instead. That's the main Problem I have: https://jsfiddle.net/5nt7jqyf/
I wouldn't have this problem with jquery ui draggable since the event.target is filled with the child-reference but I don't want to use the libary and stick to the native html5 solution.
You can disable temporary the draggable attribute when event is triggered by input target, for this you should add on body a pointerdown listener and disable the attribute there, also a pointerup listener where you'll enable it back:
pointerdown: function(e) {
if (e.target.tagName === 'INPUT')
jQuery(this).attr('draggable', null);
},
pointerup: function(e) {
if (!jQuery(this).attr('draggable'))
jQuery(this).attr('draggable', true);
}