jQuery Plugin For Drag and Drop Grid Layout - DND Grid
File Size: | 5.26 KB |
---|---|
Views Total: | 4183 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.