Reordering Grid Items Via Drag and Drop – Grabbable

Category: Drag & Drop , Javascript | May 20, 2020
Author: WolfgangKurz
Views Total: 2,128 views
Official Page: Go to website
Last Update: May 20, 2020
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:

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>

3. Initialize the Grabbable and done.


4. Execute a callback function after an element changes the position.

  callback: function(el, newIndex, oldIndex) {
    alert("Grabbed!\n" + oldIndex + " -> " + newIndex);

5. Store the current position using HTML5 local storage.

  rememberId: "grabbable-sample"

6. Customize the styles of the placeholder.

  style: {
    border: "2px solid #ff0000",
    background: "#ffddcc",
    transform: "scale(0.5, 0.5)",



  • v2.1.0

You Might Be Interested In:

2 thoughts on “Reordering Grid Items Via Drag and Drop – Grabbable

  1. Simon Laudati

    Can’t make it work with the current version, had to download the 1.0.4 from the demo


Leave a Reply