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>
</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