Reordering Grid Items Via Drag and Drop – Grabbable

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

Preview:

Reordering Grid Items Via Drag and Drop – Grabbable

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:

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

Initialize the Grabbable and done.

document.querySelector(".grabbable-parent").grabbable();