Author: | WolfgangKurz |
---|---|
Views Total: | 5,783 views |
Official Page: | Go to website |
Last Update: | May 20, 2020 |
License: | MIT |
Preview:

Description:
grabbable is a lightweight and easy-to-use JavaScript library that enables your users to re-sort a group of grid items through mouse drag and drop.
How to use it:
1. Include the JavaScript file grabbable.js right before the </body>
tag.
<script src="grabbable.js"></script>
2. Add a group of grid items into a DIV container called ‘grabbable-parent’.
<div class="box grabbable-parent"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div>
3. Initialize the Grabbable and done.
document.querySelector(".grabbable-parent").grabbable();
4. Execute a callback function after an element changes the position.
document.querySelector(".grabbable-parent").grabbable({ callback: function(el, newIndex, oldIndex) { alert("Grabbed!\n" + oldIndex + " -> " + newIndex); } });
5. Store the current position using HTML5 local storage.
document.querySelector(".grabbable-parent").grabbable({ rememberId: "grabbable-sample" });
6. Customize the styles of the placeholder.
document.querySelector(".grabbable-parent").grabbable({ style: { border: "2px solid #ff0000", background: "#ffddcc", transform: "scale(0.5, 0.5)", } });
Changelog:
2020-05-20
- v2.1.0
Awesome work, but it doesn’t work on ipad. Any fix for that.
Can’t make it work with the current version, had to download the 1.0.4 from the demo