CODEWITHSUNDEEP
javascriptjquery
Insomnia88
Insomnia88

Reputation: 368

prevent children to be dragged with html5 draggable

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

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.

Upvotes: 2

Views: 706

Answers (1)

n--
n--

Reputation: 3856

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

Upvotes: 3

Related Questions