vue-dialog-drag
Simple draggable dialog
Features:
- Drag & Drop
- Touch support (only for drag, not for drop)
- Drop area component
- 'Pin mode', to lock drag.
Installation
npm install vue-dialog-drag --save
Usage
Import and register component
...components:DialogDrag
include css
Or import source component from: 'vue-dialog-drag/src/vue-dialog-drag.vue' And install devDependencies. (stylus and pug) see package.json)
Examples
Single file component
Test dialog Drop Here <!-- optional dialog styles, see example -->
html
Dialog Component
Slots
- title: dialog title. If you don't need formatted title, use 'title' prop.
- button-pin: content for pin button
- button-pinned: content for pin button when dialog is pinned
- button-close: content for close button
Props
- id: Unique id for dialog
- title: Dialog title
- eventCb: Function(props Object)
- options: Object
- left: Number
- top: Number
- zIndex: Number
- x: alias of left
- y: alias of top
- z: alias of zIndex
- width: Number (0 or null to auto)
- height: Number (0 or null to auto)
- buttonPin: Boolean
- buttonClose:Boolean
- dragCursor: css cursor to show when drag is enabled
- centered: "viewport" | "parent" , center dialog to viewport or parent element
- pinned: Boolean, disable/enable drag
- dropEnabled: Boolean, handle drag with mouse events, instead of drag events
Events
All event emits an object: { id, left, top, x, y, z, width, height, pinned } You can format it, whith 'eventCb' prop.
- load: fired on mounted
- focus: fired on click and touch
- pin: fired on pin / unpin dialog
- drag-start: fired on dragstart
- move: fired when move dialog
- drag-end: fired on dragend
- close: fired when close dialogs
Css
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
Drop area component
Slots
Over: content rendered when the dialog is dragged over drop area.
Events
drop: fired when drop the dialog, emits dialog id.