Excluding some element inside draggable element

[adeelhussain]

• I'm submitting a ...
  [*] feature request

• What is the current behavior?
  Right now if we put the directive into the parent div then its makes the whole div draggable, also it provides handler too through which we can drag using that handler

• What is the expected behavior?
  It should allow to exclude some elements inside that div by passing the ID or Class or any identifier in the directive as attributes so that if we drag that element then it should not drag!

[ObaidUrRehman]

Can you explain the use case for this?
Is there any possibility you can apply the directive to items within the div and not on the div itself?

[adeelhussain]

@ObaidUrRehman Lets say i have a div which have draggable directive and inside that there is an input field, now if i want to select all the text inside that input field by clicking and drag then this is not allowing and the whole div start dragging!

[ed-alertedh]

@adeelhussain I had the same problem. As a workaround I found I could disable dragging when the mouse enters any of the input fields.
In the component code:

export class MyComponent {
    private dragEnable: boolean = true;
}

Then inside the html template:

<div class="my-container-class" draggable [dragEnabled]="dragEnable">
    <input (mouseenter)="dragEnable=false" (mouseleave)="dragEnable=true"></input>
</div>

[adeelhussain]

@ed-alertedh i have done the same 😄

[Tucaen]

Any updates on this?
My use case is a table header, which can be dragged for resorting the columns order and also opens a popover on clicking the filter icon. The popover is draggable as well and I have the same problem with the inputs.

The suggested workaround would be pretty messy, because of component nesting.