Drag and Drop Template Management System with Jquery
Wall Script
Wall Script
Thursday, March 24, 2011

Drag and Drop Template Management System with Jquery

I have been developing Template (User Interface) management system with drag and drop panel support for my future project. In this post I want to explain how to design database tables and implementing grids drag and drop usability with jqueryUI plugin. Using this system your web project will prove a choice to the end-user, they can manage their own template interface. Take a look at this live demo

Template Management with Drag and Drap

Download Script     Live Demo

Sample database design for User Interface Management system. Contains there table users, grids and usergrid_relation.
Template Management with Database Design

users
Contains user management details username, password, email and etc.
CREATE TABLE `users` (
`user_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(255)
)

grids
Contains grid or block types table columns grid_id, grid_name and grid_style(Here you have to store CSS class name)
CREATE TABLE `grids`
(
`grid_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`grid_name` varchar(255),
`grid_style` varchar(255)
)

Template Management Blocks Table

usergrid_relation
This table is relations between users and grids tables and grid order.
CREATE TABLE `usergrid_relation`
(
`ug_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`user_id_fk` int(11),
`grid_id_fk` int(11),
`grid_order` int,
FOREIGN KEY(user_id_fk) REFERENCES users(user_id),
FOREIGN KEY(grid_id_fk) REFERENCES grids(grid_id)
)

Template Management Relation Table

Javascript
Contains javascipt code. $("#sortable" ).sortable(){}- sortable is the ID name of the UL tag calling jqueryUI drag plugin. $(".save" ).click(){}- save is the CLASS name of the Save Template button using $("#sortable").sortable("serialize") calling grids block ID values
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function()
{
$( "#sortable" ).sortable({
revert: true
});
$( "ul, li" ).disableSelection();
// Save Button
$('.save').click(function()
{
$.ajax
({
type: "POST",
url: "drag_ajax.php",
data: $("#sortable").sortable("serialize"),
success: function(data)
{
$('.flash').show();
$('.flash').html("Updated")
}
});

setTimeout(function()
{
$(".flash").slideUp("slow", function () {
$(".flash").hide();
}); }, 3000);

});

});
</script>

UIpage.php
Contains PHP code. Displaying records from users,grids and usergrid_relation tables where login user session $user_session_id eg: 1
<div class='flash'></div>
<input type="button" class="save" value="Save Template"/>
<ul id="sortable">
<?php
include("db.php");
$sql=mysql_query("SELECT b.grid_id,b.grid_name,b.grid_style FROM users a, grids b, usergrid_relation c where a.user_id=c.user_id_fk and b.grid_id=c.grid_id_fk and a.user_id='$user_session_id' order by c.grid_order;");
while($row=mysql_fetch_array($sql))
{
$grid_id=$row['grid_id'];
$grid_name=$row['grid_name'];
$grid_style=$row['grid_style'];
?>
<li class="ui-state-default <?php echo $grid_style;?>" id="item-<?php echo $grid_id;?>"><?php echo $grid_name;?></li>
<?php
}
?>
</ul>

drag_ajax.php
Contains simple PHP code. Updating usergrid-relation table values where login user session id $user_session_id.
<?php
include('db.php');
if($_POST['item'])
{
foreach($_POST['item'] as $grid_order=>$grid_id)
{
mysql_query("UPDATE usergrid_relation SET grid_order = '$grid_order' WHERE grid_id_fk ='$grid_id' and user_id_fk='$user_session_id'");
}
}
?>

CSS code
body
{
font-family:Arial, Helvetica, sans-serif
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
border:solid 2px #333;
height:150px;
float:left;
font-size:26px;
box-shadow:0px 0px 10px #006699;
-moz-box-shadow:0px 0px 10px #006699;
-webkit-box-shadow:0px 0px 10px #006699;
border-radius: 8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#f2f2f2;
display:block;
cursor:pointer;
}
#container
{
width:850px; margin:0 auto; height:800px;
}
.save
{
background-color:#333;
padding:6px;
font-weight:bold;
color:#fff;
cursor:pointer;
font-size:18px;
border-radius: 6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
margin-bottom:20px;
}
.flash
{
text-align:center;
padding:8px;
display:none;
border:solid 1px #000000;
background-color:#fff;
}
.big
{
width:800px;
}
.medium
{
width:390px;
}
.small
{
width:200px;
}
web notification

24 comments:

  1. UnknownMarch 24, 2011 at 6:20 AM

    Well done guys.

    ReplyDelete
  2. AnonymousMarch 24, 2011 at 6:22 AM

    Live demo is not working, please check.

    ReplyDelete
  3. sreeMarch 24, 2011 at 6:39 AM

    wow really fantastic srini, tnx :)

    ReplyDelete
  4. Maxweels Global TradeMarch 24, 2011 at 6:58 AM

    great job as usual

    ReplyDelete
  5. Srinivas TamadaMarch 24, 2011 at 7:01 AM

    Demo - Don't try with Internet Explorer browser

    ReplyDelete
  6. SchattenbaumMarch 24, 2011 at 9:58 AM

    I think its maybe better with the internal storage of the browser.
    Its a optional features which is only a "nice to have". So i dont worry if only from people with a modern browser have access to the feature...

    ReplyDelete
  7. PavelMarch 24, 2011 at 5:06 PM

    "Demo - Don't try with Internet Explorer browser"

    Why? IE8 - working good.

    ReplyDelete
  8. davidMarch 24, 2011 at 10:37 PM

    @Srinivas Anyway, can we run this script with Internet Explorer?

    ReplyDelete
  9. Srinivas TamadaMarch 25, 2011 at 2:03 AM

    @Pavel @David

    IE browsers not supporting CSS3

    ReplyDelete
  10. vishalMarch 25, 2011 at 3:49 AM

    it is support ie 6 browser...........
    how to download full script........!

    ReplyDelete
  11. Happy HostingApril 8, 2011 at 4:09 AM

    Nice presentation. Good browser support.

    ReplyDelete
  12. jakirasJuly 10, 2011 at 12:53 AM

    really this is an amazing script, but I would like to know how do I upgrade by using a user rather than a variable in the browser address bar pass this way
    www.website.com/home.php?idProc=37
    ..... idProc represents the id stored in the database. The example comes with a variable
    $ user_grid_id = '1 '
    ie has a fixed value and I want to assign a dynamic value, that way I can do?

    ReplyDelete
  13. AnonymousSeptember 22, 2011 at 3:18 PM

    change this $ user_grid_id = '1';
    to
    $ user_grid_id = $_GET['idProc'];

    ReplyDelete
  14. AnonymousMarch 7, 2012 at 7:28 AM

    What use is the field grid_style of the grids table and how use it?

    ReplyDelete
  15. AnonymousJuly 2, 2012 at 5:44 AM

    I want to remove the button "Save Template" and changes make automatically. how make this?

    ReplyDelete
  16. Simranjeet singhAugust 23, 2012 at 2:43 AM

    is this not working in IE ???

    ReplyDelete
  17. Sharanu AkkurJune 10, 2013 at 3:55 AM

    HI Srinivas i have one query

    i would like to create this type of form with dynamic in php in my website plz check the below link and let me know

    http://www.phpform.org/formbuilder/index.php

    ReplyDelete
  18. Deepan PMarch 5, 2014 at 5:57 AM

    Nice Layout builder, Thanks..
    But it lag in Drop Event to go Perfect places.. can any one explain how Drop event take appropriate place to fit.

    ReplyDelete
  19. AnonymousSeptember 19, 2014 at 8:46 AM

    Very nice grid, but it seems that it only works with jquery 1.4.2. If I use later jquery version thats needed for other plugin, the drag n drop function fails. Any idea why?

    ReplyDelete
  20. AnonymousSeptember 19, 2014 at 8:59 AM

    Wrote a comment a couple of minutes ag. Went to jquery sortable and used these links that where in the example ... and then drag n drop worked. You could update the code. Thanks

    //code.jquery.com/jquery-1.10.2.js
    //code.jquery.com/ui/1.11.1/jquery-ui.js

    ReplyDelete
  21. AnonymousMarch 18, 2015 at 1:29 PM

    good tutorial

    ReplyDelete
  22. AnonymousJune 27, 2015 at 7:11 AM

    This looks cool

    ReplyDelete
  23. SinanNovember 13, 2015 at 1:17 PM

    thank you, with php and mySQL amazing a job

    ReplyDelete

Most Popular Posts

mailxengine Youtueb channel
Facebook and Google Login
Make in India
X