🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

grid-layout Drag

Documentation

dndgrid

Drag and drop grid element plugin for jQuery

Example > http://juji.github.io/dndgrid/

Auto initialization

<div class="dnd-grid">   <div class="dnd-gridcell" style=" ... "></div>   <div class="dnd-gridcell" style=" ... "></div>   <div class="dnd-gridcell" style=" ... "></div>   <div class="dnd-gridcell" style=" ... "></div> </div>

with another drag trigger

<div class="dnd-grid">   <div class="dnd-gridcell" style=" ... "> <span style=" ... " class="dnd-trigger"></span> </div>   <div class="dnd-gridcell" style=" ... "> <span style=" ... " class="dnd-trigger"></span> </div>   <div class="dnd-gridcell" style=" ... "> <span style=" ... " class="dnd-trigger"></span> </div>   <div class="dnd-gridcell" style=" ... "> <span style=" ... " class="dnd-trigger"></span> </div> </div>

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. }) 

Self initilization

$(function(){       $('.dnd-gridcell').dndgrid({        'trigger' : '.dnd-trigger'      });       });

You May Also Like