Simple vue draggable dialog
Simple draggable dialog
Features:
npm install vue-dialog-drag --save
Import and register component
import DialogDrag from 'vue-dialog-drag'
export default{
...
components:{
DialogDrag
}
}
include css
<style src='vue-dialog-drag/dist/vue-dialog-drag.css'></style>
Or import source component from: ‘vue-dialog-drag/src/vue-dialog-drag.vue’
And install devDependencies. (stylus and pug)
see package.json)
<template>
<div id="app">
<dialog-drag id="dialog-1">
<p> Test dialog</p>
</dialog-drag>
<drop-area @drop='drop'>
<p>Drop Here</p>
</drop-area>
</div>
</template>
<script>
import DialogDrag from 'vue-dialog-drag'
import DropArea from 'vue-dialog-drag/dist/drop-area'
export default {
name: 'app',
components: {
DialogDrag,
DropArea
},
methods: {
drop (id) {
console.log('drop id:', id)
}
}
}
</script>
<style src="vue-dialog-drag/dist/vue-dialog-drag.css"></style>
<style src="vue-dialog-drag/dist/drop-area.css"></style>
<!-- optional dialog styles, see example -->
<style src="vue-dialog-drag/dist/dialog-styles.css"></style>
All event emits an object: { id, left, top, x, y, z, width, height, pinned }
You can format it, whith ‘eventCb’ prop.
The main container has class .dialog-drag, and .dialog-drag .fixed when dialog is pinned
You can import extra dialog styles from dist/dialog-styles.css.
view: example styles
Over: content rendered when the dialog is dragged over drop area.
drop: fired when drop the dialog, emits dialog id.