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.
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:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script> // To use with default settings $('#container').elementMove(); // To use with customized settings (only allowing y-axis moving) $('#container').elementMove({ swipeDirection: 1 }); </script> ##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
##Contact me
Feel free to contact me on Twitter @beno182
