jQuery Plugin For Drag and Drop Grid Layout - DND Grid

File Size: 5.26 KB
Views Total: 4171
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Drag and Drop Grid Layout - DND Grid

DND Grid is a small jQuery plugin for creating a compact grid layout that allows you to rearrange the grid items through drag and drop.

How to use it:

1. Load the necessary jQuery javascript and the jQuery DND Grid plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.dndgrid.min.js"></script>

2. Create a grid layout with drag triggers as follows.

<div class="dnd-grid">

  <div class="dnd-gridcell image" style="background-image:url('1.JPG');">
    <div class="dnd-trigger"></div>

  <div class="dnd-gridcell image" style="background-image:url('2.jpg');">
    <div class="dnd-trigger"></div>

  <div class="dnd-gridcell image" style="background-image:url('3.jpg');">
    <div class="dnd-trigger"></div>



3. The CSS to style the grid items and drag triggers.

.image {
  width: 300px;
  height: 300px;
  background-size: cover;
  display: inline-block;

.image .dnd-trigger {
  width: 34px;
  height: 34px;
  background-color: white;
  background-image: url('icon-drag.png');
  background-position: center center;
  background-repeat: no-repeat;

4. Events.

// Placed When moved, the event placed will be triggered.
  // moved but not dropped yet.

// Dropped When moved, the event dropped will be triggered.
  // Dropped. The move is permanent.

Change log:


  • added 'placed' event


  • prevent inter-parent drop


  • z-index ordering

This awesome jQuery plugin is developed by juji. For more Advanced Usages, please check the demo page or visit the official website.