UNPKG

4.46 kBMarkdownView Raw
1apeman-react-draggable
2==========
3
4<!---
5This file is generated by ape-tmpl. Do not update manually.
6--->
7
8<!-- Badge Start -->
9<a name="badges"></a>
10
11[![Build Status][bd_travis_shield_url]][bd_travis_url]
12[![Code Climate][bd_codeclimate_shield_url]][bd_codeclimate_url]
13[![Code Coverage][bd_codeclimate_coverage_shield_url]][bd_codeclimate_url]
14[![npm Version][bd_npm_shield_url]][bd_npm_url]
15
16[bd_repo_url]: https://github.com/apeman-react-labo/apeman-react-draggable
17[bd_travis_url]: http://travis-ci.org/apeman-react-labo/apeman-react-draggable
18[bd_travis_shield_url]: http://img.shields.io/travis/apeman-react-labo/apeman-react-draggable.svg?style=flat
19[bd_license_url]: https://github.com/apeman-react-labo/apeman-react-draggable/blob/master/LICENSE
20[bd_codeclimate_url]: http://codeclimate.com/github/apeman-react-labo/apeman-react-draggable
21[bd_codeclimate_shield_url]: http://img.shields.io/codeclimate/github/apeman-react-labo/apeman-react-draggable.svg?style=flat
22[bd_codeclimate_coverage_shield_url]: http://img.shields.io/codeclimate/coverage/github/apeman-react-labo/apeman-react-draggable.svg?style=flat
23[bd_gemnasium_url]: https://gemnasium.com/apeman-react-labo/apeman-react-draggable
24[bd_gemnasium_shield_url]: https://gemnasium.com/apeman-react-labo/apeman-react-draggable.svg
25[bd_npm_url]: http://www.npmjs.org/package/apeman-react-draggable
26[bd_npm_shield_url]: http://img.shields.io/npm/v/apeman-react-draggable.svg?style=flat
27[bd_bower_badge_url]: https://img.shields.io/bower/v/apeman-react-draggable.svg?style=flat
28
29<!-- Badge End -->
30
31
32<!-- Description Start -->
33<a name="description"></a>
34
35apeman react package for draggable component.
36
37<!-- Description End -->
38
39
40<!-- Overview Start -->
41<a name="overview"></a>
42
43
44
45<!-- Overview End -->
46
47
48<!-- Sections Start -->
49<a name="sections"></a>
50
51<!-- Section from "doc/guides/01.Installation.md.hbs" Start -->
52
53<a name="section-doc-guides-01-installation-md"></a>
54Installation
55-----
56
57```bash
58$ npm install apeman-react-draggable --save
59```
60
61
62<!-- Section from "doc/guides/01.Installation.md.hbs" End -->
63
64<!-- Section from "doc/guides/02.Demo.md.hbs" Start -->
65
66<a name="section-doc-guides-02-demo-md"></a>
67Demo
68-----
69
70[Live demo][demo_url] is hosted on GitHub Pages.
71
72[demo_url]: http://apeman-react-labo.github.io/apeman-react-draggable/demo/demo.html
73
74<!-- Section from "doc/guides/02.Demo.md.hbs" End -->
75
76<!-- Section from "doc/guides/03.Usage.md.hbs" Start -->
77
78<a name="section-doc-guides-03-usage-md"></a>
79Usage
80---------
81
82```jsx
83"use strict";
84
85import React from 'react';
86import {ApDraggable, ApDraggableStyle} from 'apeman-react-draggable';
87
88
89var html = (
90 <html>
91 <head>
92 <ApDraggableStyle></ApDraggableStyle>
93 </head>
94 <body>
95 <ApDraggable onStart={()=> {
96
97 }}
98 onMove={() => {
99
100 }}
101 onEnd={() => {
102
103 }}
104 direction="ALL">
105 <div>Drag me!</div>
106 </ApDraggable>
107 </body>
108 </html>
109);
110
111```
112
113
114
115<!-- Section from "doc/guides/03.Usage.md.hbs" End -->
116
117<!-- Section from "doc/guides/04.Props.md.hbs" Start -->
118
119<a name="section-doc-guides-04-props-md"></a>
120Props
121-----
122
123| Name | Type | Default | Description |
124| ---- | ---- | ------- | ----------- |
125| onStart | function | | Callback when drag started. |
126| onMove | function | | Callback when drag moved. |
127| onStop | function | | Callback when drag stopped. |
128| shouldMove | function | | Called when drag moved. Returns false to cancel moving. |
129| direction | string | | Move direction. |
130| x | number | | X position. |
131| minX | number | MIN_SAFE_INTEGER | Min x position. |
132| maxX | number | MAX_SAFE_INTEGER | Max x position. |
133| y | number | | Y potion. |
134| minY | number | MIN_SAFE_INTEGER | Min y position. |
135| maxY | number | MAX_SAFE_INTEGER | Max y position. |
136
137
138### Directions
139
140+ "HORIZONTAL"
141+ "LEFT"
142+ "RIGHT"
143+ "VERTICAL"
144+ "UP"
145+ "DOWN"
146+ "NONE"
147+ "ALL"
148
149
150<!-- Section from "doc/guides/04.Props.md.hbs" End -->
151
152
153<!-- Sections Start -->
154
155
156<!-- LICENSE Start -->
157<a name="license"></a>
158
159License
160-------
161This software is released under the [MIT License](https://github.com/apeman-react-labo/apeman-react-draggable/blob/master/LICENSE).
162
163<!-- LICENSE End -->
164
165
166<!-- Links Start -->
167<a name="links"></a>
168
169Links
170------
171
172+ [apeman](https://github.com/apeman-labo/apeman)
173+ [apeman-react-labo](https://github.com/apeman-react-labo)
174+ [React](https://facebook.github.io/react/)
175
176<!-- Links End -->