I found some solution to make drag and drop on dashboard. After drag and drop we need to keep save the state for each user so when user login they can get their own dashboard what they saved last time.
First download and add jquery and jqueryui to your page
Lets assume we have 3 column, here is the code
<!-- This is first column -->
<div id="column_1" class="column">
<div id="item_1" class="dragbox">
<!-- this one is first item of 1st column -->
<h2>Title for 1</h2>
<div class="dragbox-content">Your contents goes here...</div>
</div>
<div id="item_2" class="dragbox">
<!-- this one is second item of 1st column -->
<h2>Title for 2</h2>
<div class="dragbox-content">Your contents goes here...</div>
</div>
<div id="item_3" class="dragbox">
<!-- this one is third item of 1st column -->
<h2>Title for 3</h2>
<div class="dragbox-content">Your contents goes here...</div>
</div>
</div>
<!-- 2nd Column -->
<div id="column_2" class="column">
<div id="item_4" class="dragbox">
<!-- this one is 4th item of 2nd column -->
<h2>Title for 4</h2>
<div class="dragbox-content">Your contents goes here...</div>
</div>
<div id="item_5" class="dragbox">
<!-- this one is 5th item of 2nd column -->
<h2>Title for 5</h2>
<div class="dragbox-content">Your contents goes here...</div>
</div>
</div>
<!-- Third column -->
<div id="column_3" class="column">
<div id="item_6" class="dragbox">
<!-- this one is 6th item of 2nd column -->
<h2>Title for 6</h2>
<div class="dragbox-content">Your contents goes here...</div>
</div>
<div id="item_7" class="dragbox">
<!-- this one is 7th item of 2nd column -->
<h2>Title for 7</h2>
<div class="dragbox-content">Your contents goes here...</div>
</div>
</div>
Make sure your column id is unique and your all item id under any column should be unique. Here is use id like “item_1”, “item_2″……”item_5″…etc.
Here is the css code
.column{
width:32%;
margin-right:.5%;
float:left;
min-height: 300px;
}
.column .dragbox{
margin:5px;
background:#fff;
position:relative;
border:1px solid #ddd;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:2px dashed #883533;
}
You can customized css based on your design but make sure that your .column class should have min-height or height if you remove that then you cann’t drag the item.
h2 used for your dragable item,
.placeholder is used when you drag some box and place holder will showing where it need to be place.
here is the javascript code
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
//saveState();
}
})
.disableSelection();
h2 used as handle, you can change it, we’ll discuss about stop in next section.
your outcome something like this, here when I trying to drag item 2
Now In this way we just drag and drop but when we need to save each state and when user logout and again login the dashboard should be same when they logout, I used here php and mysql to save state,
Here is the database table
CREATE TABLE IF NOT EXISTS `dashboard_items` ( `id` int(11) NOT NULL AUTO_INCREMENT, `column_no` int(11) NOT NULL, `order` int(11) NOT NULL, `widget` char(100) COLLATE utf8_unicode_ci NOT NULL, `last_update_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, `user_id` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
‘id’ is used for item id (e.g. item_1, item_2….. item_8 etc.)
‘column_no’ is column number here we used just 3 column
‘order’ it used for item order in a column,
‘widget’ it uses when we do for loop we might need to call some widget which we need to put here..
‘user_id’ if you have multiple user and you can keep user id and save its state.
now, how we fetch the data
$column = array();
for($i = 1, $i <= 3; $i++){
$sql = "SELECT `DashboardItem`.`id`, `DashboardItem`.`column_no`, `DashboardItem`.`order`, `DashboardItem`.`widget`, `DashboardItem`.`last_update_date`, `DashboardItem`.`user_id` FROM `dashboard_items` AS `DashboardItem` WHERE `DashboardItem`.`column_no` = $i and `DashboardItem`.`user_id` = 1 ORDER BY `DashboardItem`.`order` ASC";
$column[$i] = $this->DashboardItem->query($sql); // here is used cakephp syntex which will output like the following section
}
the output for one column
Array
(
[0] => Array
(
[DashboardItem] => Array
(
[id] => 3
[column_no] => 1
[order] => 2
[widget] => 0
[last_update_date] => 2012-02-17 11:41:49
[user_id] => 1
)
)
[1] => Array
(
[DashboardItem] => Array
(
[id] => 2
[column_no] => 1
[order] => 1
[widget] => 0
[last_update_date] => 2012-02-17 11:41:49
[user_id] => 1
)
)
[2] => Array
(
[DashboardItem] => Array
(
[id] => 1
[column_no] => 1
[order] => 0
[widget] => 0
[last_update_date] => 2012-02-17 11:00:42
[user_id] => 1
)
)
)
Now here is the html code
<div class="column" id="column_1">
<?php foreach($column[1] as $col){ ?>
<div class="dragbox" id="item_<?php echo $col['DashboardItem']['id']?>" >
<h2> Call your header based on the widget</h2>
<div class="dragbox-content" >
put your contents based on your widget
</div>
</div>
<?php } ?>
</div>
<div class="column" id="column_2" >
<?php foreach($column[2] as $col){ ?>
<div class="dragbox" id="item_<?php echo $col['DashboardItem']['id']?>" >
<h2>put your contents based on your widget</h2>
<div class="dragbox-content" >
put your contents based on your widget
</div>
</div>
<?php } ?>
</div>
<div class="column" id="column_3" >
<?php foreach($column[3] as $col){ ?>
<div class="dragbox" id="item_<?php echo $col['DashboardItem']['id']?>" >
<h2>put your contents based on your widget</h2>
<div class="dragbox-content" >
put your contents based on your widget
</div>
</div>
<?php } ?>
</div>
<div id='result'></div>
Now we have to pass ajax requset based on the change of dahboard which will keep your dashboard same
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
saveState();
}
})
.disableSelection();
function saveState(){
var items = [];
// traverse all column div and fetch its id and its item detail.
$(".column").each(function(){
var columnId = $(this).attr("id");
$(".dragbox", this).each(function(i){ // here i is the order, it start from 0 to...
var item = {
id: $(this).attr("id"),
column_no: columnId,
order: i
}
items.push(item);
});
});
$("#results").html("loading..");
var shortorder = {items : items};
$.ajax({
url: "<?php echo "/dashboard_item.php"; ?>",
async: false,
data: shortorder,
dataType: "html",
type: "POST",
success: function(html){
$("#results").html(html);
}
});
}
saveState() is calling when you do any drag and drop of any item.
under saveState() it fetch the data based on column and make an array which we passing to ajax request then we save
$data = $_POST;
foreach($data as $d){
$item_no = split("_",$d['id']); //split item_3 to get 3 and that is our item table id
$d['id'] = $item_no[1];
$col_no = split("_", $d['column_no']); //split
$d['column_no'] = $col_no[1];
$this->Dashboard->save($d); // I used cakephp syntax here, it will update database You have to update each row based on the column no and user id
}
In this way we can keep save the drag and drop state. 🙂
sarwar's weblogs 
Fantastic guide. Unfortunately I couldn’t translate the PHP to CF (just a neophyte in both), but I will keep it bookmarked for future application. Thank you!
Hi, it’s possible to extends this script to make the element resizable?
for example if I want a box be the double, can I resize it and other remains same dimensions?
Pingback: Drag and Drop dashboard using jquery and save state of each change
Could some one please share i zip of this completed?
It was very helpful, thanks!
Can we see live example??
yes please i live demo wud help 🙂
It’ll be very helpful if you share us either live demo or provide us downloadable files.
Thank you!
Did anyone finish this tutorial? Please share zip file. thanks
nwmk qv wwpe
Hey Can you send me zip file of drag and drop demo? Because I tried to do this demo but it will give no response.
$(document).ready(function(){
$(‘.column’).sortable({
connectWith: ‘.column’,
handle: ‘h2’,
cursor: ‘move’,
placeholder: ‘placeholder’,
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
//saveState();
}
})
.disableSelection();
});
nice, but useless without live demo and downloadable source