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>

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

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

  ...

</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.
$('dnd-gridcell').on('placed',function(){
  // moved but not dropped yet.
})

// Dropped When moved, the event dropped will be triggered.
$('dnd-gridcell').on('dropped',function(){
  // Dropped. The move is permanent.
})

Change log:

2016-04-30

• added 'placed' event

2014-07-23

• prevent inter-parent drop

2014-07-16

• 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.