• About Sarwar
  • Portfolio
  • আমার বাংলা

sarwar's weblogs

~ story of web applications…..

sarwar's weblogs

Tag Archives: drag

Drag and Drop dashboard using jquery and save state of each change

17 Friday Feb 2012

Posted by Sarwar in JavaScript, jquery, jQuery UI, PHP

≈ 13 Comments

Tags

dashboard, drag, Drag & Drop, drop, jquery, jqueryui, sortable


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. 🙂

Advertisement

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

Author

  • Sarwar

Categories

  • .htaccess
  • Apache
  • API
  • CSS
  • Debug
  • Framework
    • CakePHP
  • HTML
  • JavaScript
    • Ajax
    • ckeditor
    • jquery
    • jQuery UI
    • tinymce
  • Joomla
    • Virtumart
  • Linux
  • MySQL
  • PHP
  • SVN
  • Twitter
  • WHM/cPanel
View Sarwar Hossain's profile on LinkedIn
Follow bdsarwar on Twitter

Tweets

  • RT @ESPNUK: If Erling Haaland wanted to match Cristiano Ronaldo's 700 league goals, he'd have to score 40 goals a season until the year 203…    1 month ago
  • RT @Cristiano: Great team effort and a good victory. We stand together. Let’s go, United! 💪🏽 https://t.co/GnjAR3oM3s    3 months ago
  • RT @Cristiano: Hard work always pays off 🙏🏽💪🏽 https://t.co/kMqIpB2nfV    5 months ago
  • RT @realDonaldTrump: Just finished a very good conversation with President Xi of China. Discussed in great detail the CoronaVirus that is r…    2 years ago
  • “Running a small business without a plan is a lot like driving without directions.” — @GoldmanSachs via @appexchange    6 years ago
  • RT @TechCrunch: 5K people turn up to catch Pokémon in Chicago tcrn.ch/2aaLRys https://t.co/VVQSd7nmN4    6 years ago

Flickr Photos

From Helipad ViewAbove the CloudHillNear to SkySunset Moment#sunset #beach #ocean #coxsbazar#jamroll #food #deliciousfood #homemade  #homemadefood#seaside #ocean #oceanview #travelphotography #coxsbazar #bayofbengal #travel #longestbeach#beach #lifeguard #seaside #holiday #tour #longestbeach #travel #travelphotography #coxsbazar #bayofbengal#resort #mountains
More Photos

Archives

  • February 2012 (1)
  • January 2012 (2)
  • August 2011 (1)
  • July 2011 (1)
  • June 2011 (2)
  • May 2011 (2)
  • April 2011 (1)
  • March 2011 (3)
  • December 2010 (3)
  • November 2010 (1)
  • October 2010 (4)
  • September 2010 (1)
  • June 2010 (1)
  • May 2010 (2)
  • April 2010 (1)
  • March 2010 (1)
  • January 2010 (2)
  • July 2009 (1)
  • January 2009 (1)
  • August 2008 (1)

Recent Comments

  • Kush on how to cakephp in a sub-directory, access it from root using .htaccess
  • Mr Griever on Access session data in a model -cakephp
  • apnarahimyarkhan on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • Toko Kunci Pintu Murah on set & reset form text value onfocus, onblur, onclick using javascript
  • nevitaputri1.doodlekit on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • RSS - Posts
  • RSS - Comments

Meta

  • Register
  • Log in
  • Entries feed
  • Comments feed
  • WordPress.com

Blog at WordPress.com.

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
  • Follow Following
    • sarwar's weblogs
    • Join 328 other followers
    • Already have a WordPress.com account? Log in now.
    • sarwar's weblogs
    • Customize
    • Follow Following
    • Sign up
    • Log in
    • Report this content
    • View site in Reader
    • Manage subscriptions
    • Collapse this bar
 

Loading Comments...
 

    %d bloggers like this: