Skip to content

Latest commit

 

History

History
83 lines (67 loc) · 2.15 KB

README.md

File metadata and controls

83 lines (67 loc) · 2.15 KB
Raw

DEPRECATED see cerijs

vue-drag-handle

To make something responsive to dragging, a drag-handle is needed.

Demo

Used in

Install

npm install --save-dev vue-drag-handle
// vue touch@next - not released on npm currently
npm install --save-dev git://github.com/vuejs/vue-touch.git#next

// vue@1.0
npm install --save-dev vue-drag-handle@1 vue-touch@1

or include build/bundle.js.

Usage

# somewhere
Vue.use(require('vue-touch'))

# in your component
components:
  "drag-handle": require("vue-drag-handle")
# or, when using bundle.js
components:
  "drag-handle": window.vueComps.dragHandle
<drag-handle
  @move="move"
  @left="open"
  @aborted="close"
  :max-left="200"
></drag-handle>

For examples see dev/.

Props

Name type default description
factor Number 2 speed factor which is multiplied with the movement
z-index Number 1002 z-index of the overlay
max-left Number 0 maximum panning to the left
max-right Number 0 maximum panning to the right
offset Number 0 will be added to the position on move event
disabled Boolean false set to disable

Events

Name description
move will be emitted on move. Argument is the current position (can be negative)
left (deprecated) will be emitted on end of panning if move reached max-left
right (deprecated) will be emitted on end of panning if move reached max-right
max will be emitted on end of panning with argument left when max-left is reached or right when max-right is reached
aborted will be emitted when panning didn't reach max-left or max-right
clean-click will be emitted on click which is no mouseup of final panning

Changelog

  • 2.0.0
    now compatible with vue 2.0.0

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.