VUE JS drag modal popup
Reference: https://dev.to/mandrewcito/vue-js-draggable-div-3mee
<template>
<div ref="draggableContainer" id="draggable-container">
<div id="draggable-header" @mousedown="dragMouseDown">
<slot name="header"></slot>
</div>
<slot name="main"></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: 'DraggableDiv',
data: function () {
return {
positions: {
clientX: undefined,
clientY: undefined,
movementX: 0,
movementY: 0
}
}
},
methods: {
dragMouseDown: function (event) {
event.preventDefault()
// get the mouse cursor position at startup:
this.positions.clientX = event.clientX
this.positions.clientY = event.clientY
document.onmousemove = this.elementDrag
document.onmouseup = this.closeDragElement
},
elementDrag: function (event) {
event.preventDefault()
this.positions.movementX = this.positions.clientX - event.clientX
this.positions.movementY = this.positions.clientY - event.clientY
this.positions.clientX = event.clientX
this.positions.clientY = event.clientY
// set the element's new position:
this.$refs.draggableContainer.style.top = (this.$refs.draggableContainer.offsetTop - this.positions.movementY) + 'px'
this.$refs.draggableContainer.style.left = (this.$refs.draggableContainer.offsetLeft - this.positions.movementX) + 'px'
},
closeDragElement () {
document.onmouseup = null
document.onmousemove = null
}
}
}
</script>
<style>
#draggable-container {
position: absolute;
z-index: 9;
}
#draggable-header {
z-index: 10;
}
</style>
====== utilized in main page ==========
<!-- Start:popup code below -->
<div v-show="msgDialog2" class="web_dialog_overlay"></div>
<DraggableDiv v-show="msgDialog2" class="draggable">
<template slot="header">
<div class="col-lg-12 popupTitle">
<div class="row">
<div
class="col-lg-11"
@mousedown="dragMouseDown"
>
{{ mdlDialogTitle2 }}
</div>
<div class="col-lg-1 text-right">
<a
id="closeApproveX"
v-on:click="showHideMessage2"
style="cursor: pointer"
>✖</a
>
</div>
</div>
</div>
</template>
<template slot="main" >
This is main datat</template>
</DraggableDiv>
<template>
<DraggableDiv class="col-11">
<template slot="header">
[[[ SOME CONTENT HERE]]]
</template>
<template slot="main" >
[[[ SOME CONTENT HERE]]]
</template>
<template slot="footer">
[[[ SOME CONTENT HERE]]]
</template>
</DraggableDiv>
</template>
<script>
import DraggableDiv from './DraggableDiv'
export default {
components: {
DraggableDiv
}
}
</script>
