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' }); });
