Reordering Grid Items Via Drag and Drop – Grabbable

Category: Drag & Drop , Javascript | December 16, 2016
Author: WolfgangKurz
Views Total: 1,269
Official Page: Go to website
Last Update: December 16, 2016
License: MIT


Reordering Grid Items Via Drag and Drop – Grabbable


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:

Include the JavaScript file grabbable.js right before the </body> tag.

<script src="grabbable.js"></script>

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>

Initialize the Grabbable and done.



  • Saurabh

    Awesome work, but it doesn’t work on ipad. Any fix for that.