1 | apeman-react-draggable
|
2 | ==========
|
3 |
|
4 |
|
5 | This file is generated by ape-tmpl. Do not update manually.
|
6 | --->
|
7 |
|
8 |
|
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 |
|
30 |
|
31 |
|
32 |
|
33 | <a name="description"></a>
|
34 |
|
35 | apeman react package for draggable component.
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | <a name="overview"></a>
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | <a name="sections"></a>
|
50 |
|
51 |
|
52 |
|
53 | <a name="section-doc-guides-01-installation-md"></a>
|
54 | Installation
|
55 | -----
|
56 |
|
57 | ```bash
|
58 | $ npm install apeman-react-draggable --save
|
59 | ```
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 | <a name="section-doc-guides-02-demo-md"></a>
|
67 | Demo
|
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 |
|
75 |
|
76 |
|
77 |
|
78 | <a name="section-doc-guides-03-usage-md"></a>
|
79 | Usage
|
80 | ---------
|
81 |
|
82 | ```jsx
|
83 | "use strict";
|
84 |
|
85 | import React from 'react';
|
86 | import {ApDraggable, ApDraggableStyle} from 'apeman-react-draggable';
|
87 |
|
88 |
|
89 | var 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 |
|
116 |
|
117 |
|
118 |
|
119 | <a name="section-doc-guides-04-props-md"></a>
|
120 | Props
|
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 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 | <a name="license"></a>
|
158 |
|
159 | License
|
160 | -------
|
161 | This software is released under the [MIT License](https://github.com/apeman-react-labo/apeman-react-draggable/blob/master/LICENSE).
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 | <a name="links"></a>
|
168 |
|
169 | Links
|
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 |
|