Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ben182/jquery-element-move
jQuery-element-move is a simple jQuery plugin, that allows you to make HTML elements movable. This works in any browser, including mobile touch events.
https://github.com/ben182/jquery-element-move
jquery jquery-plugin
Last synced: 23 days ago
JSON representation
jQuery-element-move is a simple jQuery plugin, that allows you to make HTML elements movable. This works in any browser, including mobile touch events.
- Host: GitHub
- URL: https://github.com/ben182/jquery-element-move
- Owner: ben182
- License: mit
- Created: 2016-05-31T09:12:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-03T10:42:30.000Z (almost 8 years ago)
- Last Synced: 2024-10-11T06:36:49.518Z (27 days ago)
- Topics: jquery, jquery-plugin
- Language: HTML
- Homepage: https://ben182.github.io/jQuery-element-move
- Size: 675 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jQuery-element-move
[]()
[](https://github.com/ben182/jQuery-element-move)
[](https://opensource.org/licenses/MIT)
[](https://paypal.me/bbortels)
[](https://gitter.im/jQuery-element-move/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
jQuery-element-move is a simple jQuery plugin, that allows you to make HTML elements movable. This works in any browser, including mobile touch events.
## Demo and docs
Check out: https://ben182.github.io/jQuery-element-move
## How to use?
### Bower
```
bower install jQuery-element-move
```
### Old traditional way
jQuery-element-move depends on jQuery. Include them both in end of your HTML code:
```
// To use with default settings
$('#container').elementMove();
// To use with customized settings (only allowing y-axis moving)
$('#container').elementMove({
swipeDirection: 1
});
```
##Options
| Name | Description | Type | Default |
|------|-------------|------|---------|
| `backToOrigin` | if true, element will return to start position after release. | Boolean | false |
| `backToOriginAnimation` | A CSS transition effect is used for this effect so you can control the animation here. | String | `cubic-bezier(0.39, 0.58, 0.54, 1.42)` |
| `backToOriginAnimationDuration` | Control the animation time. | Number | 0.5 |
| `swipeDirection` | Customize the Direction of moving. 0 => only x-axis, 1 => only y-axis, 2 => full movement, 3 => only upwards, 4 => only downwards, 5 => only to the right, 6 => only to the left. | Number | 2 |
| `momentum` | You can enable momentum movement. If so, the element will move very fluid and gets extra movement based on previous acceleration afterwords. | Boolean | false |
| `stayInElement` | Your element will not move out of this. | String | false |
| `xScrollAmount` | You are able to specify a percantage of the element. When you scroll past this value on the x-axis, `scrollAmountCallback` will fire. | Number | 1 |
| `yScrollAmount` | You are able to specify a percantage of the element. When you scroll past this value on the y-axis, `scrollAmountCallback` will fire. | Number | 1 |
| `scrollAmountCallback` | Already explained above. Parameters: this. | Callback Function | |
| `moveCallback` | Callback Function that fires when the element moves. Parameters: this, xPos(gives the pixel offset on x-axis to the start position), yPos(gives the pixel offset on y-axis to the start position). | Callback Function | |
| `endCallback` | Callback Function that fires when you release the element. Parameters: this, xPos(gives the pixel offset on x-axis to the start position), yPos(gives the pixel offset on y-axis to the start position). | Callback Function | |
##License
Distributed under the MIT license.
##Buy me a coffee
[Donate](https://ko-fi.com/A6749M1)
##Contact me
Feel free to contact me on Twitter [@beno182](https://twitter.com/beno182)