Vue.draggable: Cannot select text within a Draggable component

[karam94]

Step by step scenario

Quite a simple scenario.
My Draggable Vue components are Bootstrap 3 panels.

Within these panels I have an 'Edit' button which displays a modal that contains text input boxes.
When I try to select the text within these text boxes, it thinks I'm trying to drag the parent component.

I have appended:
:options="{draggable: '.panel', filter: '.form-control', animation: 500}"
to my Draggable, hoping that by using filter: '.form-control' it disables any draggable functionality on my text box. It does, however text within it still doesn't select nor can I left click within the input box.

I can only edit the text within the input if I
A) Right Click on the text within the input box
B) Tab down to the input box and type

Any ideas?

[David-Desmaisons]

Use handle option to make other part of the element selectionable.

[arun0553]

@David-Desmaisons, @karam94 , I have the similar issue , when i try to select the total text in the input text box, the modal gets dragged away. I have tried the filter and had similar issue what @karam94 has told.
@David-Desmaisons how to make form elements editable and disable the drag on them?
Can you check this jsbin please, i have added an input box ?
http://jsbin.com/sepejozuke/edit?html,css,output
What is that i have been doing wrong here ? The text in the input is not selectable, its still dragging
Please help me with this.
Thanks.

[lukaszkups]

sorry for digging out this old issue, but I've got it as well, but managed to solve it - when using filter in your draggable option, please add there preventOnFilter: false (it's set to true by default) as well - it will enable you to click and select inside the input while not tiggering drag event ;)