-1

Have code like this in vue.js ,my agenda is to make the modal movable from one end to other end, here is my code,have used bootstrap modal for this purpose and have included : draggable 

<b-modal ref="my-modal" hide-footer title="Edit Record">
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <div class="">Viz Attributes</div>
        </div>

        <div class="card-body">
        </div>
    </div>
</b-modal>
Hardik Raval
  • 3,406
  • 1
  • 26
  • 28
Abhiram Ram
  • 1
  • 1

1 Answers1

2

you can't position them absolutely in the viewport.

You would need to change the positioning of the modal dialog sub-container to absolute and control the left/top position based on dragging. This is not an overly easy task. You would need to create your own modal to draggable. I suggest to you use Vue.js modal component DEMO: www.vue-js-modal.yev.io install: www.npmjs.com/package/vue-js-modal

<modal name="bar" draggable=".window-header">
  <div class="window-header">DRAG ME HERE</div>
  <div>
     Hello!
  </div>
</modal>

Draggable property can accept not only Boolean but also String parameters.

mohammad sajjad gholami
  • 111
  • 3