vue-js-modal draggable issue

Question

I am using vue-js-modal, and have a issue with it, everytime i set my modal as :draggable="true" i can drag it but it don't let me write on the inputs, because i think it considers it as draggable elements too, how can i prevent it?

this is how i set it up:

 <!-- modal dedicated to the panel history -->
  <modal :adaptive="true" height="70%"  width="60%" :resizable="true" class="modalSize" :draggable='true' name="modalPanel">
    <span class="cross" @click="$modal.hide('modalPanel')">
      ✖
    </span>
    <!-- here lives the panel history -->
    <appPanelHistory>
    </appPanelHistory>
  </modal>

when the modal open i can't change my inputs, anyone know the issue? thanks

Answer 1

Seems to be a known issue as reported here: https://github.com/euvl/vue-js-modal/issues/78

The solution would be to create an element within your modal which will be the drabble handle. So don't make it overlap your inputs! Then pass the class of the new element as the draggable prop. As string so remove the colon

E.g

<modal draggable=".handle"...