vuedragger v1.0.21
vuedragger
My team often gets some requirements such as developing a panel used to view AI results,so I made this component which can be used to drag and zoom something
Features 🥢🍚
- Tiny size(7.5KB gzipped 📦)
- Easy to use and understand 🛠
Usage 📝
$ npm i vuedragger --save-dev
Register in Vue and to do:
<template>
<div id="app">
<VueDragger :useZoom="true" :useGrid="true" :defaultPosition="{ top: 400, left: 400 }" :w="200" :h="200">
<h1>233333</h1>
</VueDragger>
</div>
</template>
<script>
import VueDragger from 'vuedragger';
export default {
name: 'app',
components: {
VueDragger
}
}
</script>
Props
Each prop has its default value, you may also not to set them 🍌
w
Type: Number
,
Default: 100
Define the width of the element
<VueDragger :w="200">
h
Type: Number
,
Default: 100
Define the height of the element
<VueDragger :h="200">
defaultPosition
Type: Object
,
Default: { top: 0, left: 0 }
Define the defaultPosition of the element
<VueDragger :defaultPosition="{ top: 200, left: 200 }">
parentLimitation
type: Boolean
,
default: true
Define whether the element can cross the boundary of its parent element
<VueDragger :parentLimitation="false">
areaLimits
Type: Object
,
Default: { minTop: null, maxTop: null, minRight: null, maxRight: null, minBottom: null, maxBottom: null, minLeft: null, maxLeft: null }
Define the scope that the element can move
<VueDragger :areaLimits="{ minTop: 100, maxTop: 100, minRight: 100, maxRight: 100, minBottom: 100, maxBottom: 100, minLeft: 100, maxLeft: 100 }">
useZoom
type: Boolean
,
default: true
Enable the element to zoom by scrolling
<VueDragger :useZoom="false">
zIndex
type: Number
,
default: 10
Define z-index of the element
<VueDragger :zIndex="11">
useGrid
type: Boolean
,
default: false
Define weather the element should snap to the grid
<VueDragger :useGrid="true">
gridX
type: Number
,
default: 100
Define the width of the grid
<VueDragger :gridX="150">
gridY
type: Number
,
default: 100
Define the height of the grid
<VueDragger :gridY="150">
Events
clicked
Parameters: Original handler
Called when the element was clicked
<VueDragger @clicked="clickedHandle">
move
Parameters: { top: xxx, left: xxx }
Called when the element move
<VueDragger @clicked="moveHandle">
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago