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):

• reading the event.target or similar data to find the children and stop it (I can't find the children)
• setting the parent to z-index to 0 in css

Here 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.

CodePudding user response：

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);
}