emiliorizzo / Vue Dialog Drag
Licence: mit
Simple vue draggable dialog
Stars: ✭ 141
Projects that are alternatives of or similar to Vue Dialog Drag
Draggable Vue Directive
Vue2 directive that handles drag & drop
Stars: ✭ 286 (+102.84%)
Mutual labels: draggable, vue2
plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (-85.11%)
Mutual labels: dialog, draggable
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-17.02%)
Mutual labels: touch, vue2
osiris
🎨 A Vue.js 2.0 universal responsive UI component library
Stars: ✭ 36 (-74.47%)
Mutual labels: vue2, ui-components
Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Stars: ✭ 23,641 (+16666.67%)
Mutual labels: draggable, touch
vue2-data-tree
A tree that data is lazy loaded. Support dragging node, checking node, editing node's name and selecting node.
Stars: ✭ 41 (-70.92%)
Mutual labels: vue2, draggable
Vuestic Admin
Free and Beautiful Vue 3 Admin Template
Stars: ✭ 8,398 (+5856.03%)
Mutual labels: ui-components, vue2
Uiv
Bootstrap 3 components implemented by Vue 2.
Stars: ✭ 882 (+525.53%)
Mutual labels: ui-components, vue2
v-drag
The simplest way to integrate dragging on Vue.js
Stars: ✭ 71 (-49.65%)
Mutual labels: vue2, draggable
V Dialogs
A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast
Stars: ✭ 121 (-14.18%)
Mutual labels: dialog, vue2
Vue Ydui
A mobile components Library with Vue2.js. 一只基于Vue2.x的移动端组件库。
Stars: ✭ 2,798 (+1884.4%)
Mutual labels: dialog, vue2
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+214.18%)
Mutual labels: touch, vue2
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+1582.98%)
Mutual labels: ui-components, vue2
vue-drr
A Vue2 component for draggable, resizable, rotatable elements
Stars: ✭ 34 (-75.89%)
Mutual labels: vue2, draggable
Scrollbooster
Enjoyable content drag-to-scroll library
Stars: ✭ 775 (+449.65%)
Mutual labels: ui-components, draggable
Panter Dialog
Panter Dialog is an stylish android library that helps users add cool features like adding header and header logos
Stars: ✭ 119 (-15.6%)
Mutual labels: ui-components, dialog
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
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)
Examples
Single file component
<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>
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].