Google plus like drag and drop adding groups


You might have marked a cool feature in google plus, where we add people to groups simply by dragging it to the perticular frame.

Here is a explanation of the above implementation using JQuery and PHP.

Google Plus Style Drag and Drop adding Groups

Sample database contains three tables and relationship between Members and Groups.

Table contains members(users) data such as member_id, member_image and etc.

CREATE TABLE IF NOT EXISTS `members` ( `member_id` int(9) NOT NULL AUTO_INCREMENT, `member_name` varchar(220) NOT NULL, `member_image` text NOT NULL, `dated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`member_id`) );

Contains groups information.

CREATE TABLE IF NOT EXISTS `groups` ( `group_id` int(9)  AUTO_INCREMENT, `group_name` varchar(220), `sort` int(9), `date` timestamp  DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`group_id`), KEY `sort` (`sort`) );

Members and Groups table relationship table contains user_id(same as memeber_id), group_id, member_id() and sort(ordering)

CREATE TABLE IF NOT EXISTS `user_group` ( `id` int(9) NOT NULL AUTO_INCREMENT, `user_id` int(9) NOT NULL, `group_id` int(9) NOT NULL, `member_id` int(9) NOT NULL, `sort` int(9) NOT NULL, PRIMARY KEY (`id`) );

Here draggable applying for two classes .members and .group

<script type=”text/javascript” src=””></script&gt; <script type=”text/javascript” src=””></script&gt; <script type=”text/javascript” src=”jquery.livequery.min.js”></script> <script type=”text/javascript” > $(function() { // Initiate draggable for public and groups var $gallery = $( “.members, .group” ); $( “img”, $gallery ).live(“mouseenter”, function() { var $this = $(this); if(!$‘:data(draggable)’)) { $this.draggable({ helper: “clone”, containment: $( “#demo-frame” ).length ? “#demo-frame” : “document”, cursor: “move” }); } }); // Initiate Droppable for groups // Adding members into groups // Removing members from groups // Shift members one group to another $(“.group”).livequery(function(){ var casePublic = false; $(this).droppable({ activeClass: “ui-state-highlight”, drop: function( event, ui ) { var m_id = $(ui.draggable).attr(‘rel’); if(!m_id) { casePublic = true; var m_id = $(ui.draggable).attr(“id”); m_id = parseInt(m_id.substring(3)); } var g_id = $(this).attr(‘id’); dropPublic(m_id, g_id, casePublic); $(“#mem”+m_id).hide(); $( “<li></li>” ).html( ui.draggable ).appendTo( this ); }, out: function(event, ui) { var m_id = $(ui.draggable).attr(‘rel’); var g_id = $(this).attr(‘id’); $(ui.draggable).hide(“explode”, 1000); removeMember(g_id,m_id); } }); }); // Add or shift members from groups function dropPublic(m_id, g_id,caseFrom) { $.ajax({ type:”GET”, url:”groups.php?m_id=”+m_id+”&g_id=”+g_id, cache:false, success:function(response){ $.get(“groups.php?reload_groups”, function(data){ $(“#groupsall”).html(data); $(“#added”+g_id).animate({“opacity” : “10” },10); $(“#added”+g_id).show(); $(“#added”+g_id).animate({“margin-top”: “-50px”}, 450); $(“#added”+g_id).animate({“margin-top”: “0px”,”opacity” : “0” }, 450); }); } }); } // Remove memebers from groups // It will restore into public groups or non grouped members function removeMember(g_id,m_id) { $.ajax({ type:”GET”, url:”groups.php?do=drop&mid=”+m_id, cache:false, success:function(response){ $(“#removed”+g_id).animate({“opacity” : “10” },10); $(“#removed”+g_id).show(); $(“#removed”+g_id).animate({“margin-top”: “-50px”}, 450); $(“#removed”+g_id).animate({“margin-top”: “0px”,”opacity” : “0” }, 450); $.get(“groups.php?reload”, function(data){ $(“#public”).html(data); }); } }); } }); </script>


<?php require_once(“”); // Initiate Object $obj = new Multiplediv(); // Add or Update Ajax Call if(isset($_GET[‘m_id’]) and isset($_GET[‘g_id’])) { $obj->addMembers((int)$_GET[‘m_id’], (int)$_GET[‘g_id’]); exit; } // Remove Memebers from groups Ajax call if(isset($_GET[‘do’])) { $obj->removeMember($_GET[‘mid’]); exit; } // Reload groups each ajax call if(isset($_GET[‘reload’])){ echo $obj->getMembers_reload(); exit; } if(isset($_GET[‘reload_groups’])){ echo $obj->getmembergroups_reload(); exit; } // Initiate Groups and members $members = $obj->public_members(); $groups = $obj->groups(); ?> Friends <div id=”main_portion”> <div id=”public”> <!– Initiate members –> <?php if(!isset($members)) $members = $obj->public_members(); if($members) { foreach($members as $member) { extract($member); echo “<div class=’members’ id=’mem”.$member_id.”‘>\n”; echo “<img src=’images/”.$member_image.”‘ rel='”.$member_id.”‘>\n”; echo “<b>”.ucwords($member_name).”</b>\n”; echo “</div>”; } } else echo “Members not available”; ?> </div> <div id=”groupsall”> Groups <!– Initiate Groups –> <?php if(!isset($groups)) $groups = $obj->groups(); if($groups) { foreach($groups as $group) { extract($group); echo “<div id='”.$group_id.”‘ class=’group‘>\n”; echo ucwords($group_name); echo “<div id=’added”.$group_id.”‘ class=’add’ style=’display:none;’ ><img src=’images/green.jpg’></div>”; echo “<div id=’removed”.$group_id.”‘ class=’remove’ style=’display:none;’ ><img src=’images/red.jpg’></div>”; echo “<ul>\n”; echo $obj->updateGroups($group_id); echo “</ul></div>”; } } ?>
Download this and modify database connection credentials.

<?php // Database declaration’s define(“SERVER”, “localhost”); define(“USER”, “username”); define(“PASSWORD”, “password”); define(“DB”, “database”);class Multiplediv { …………………… …………………… ……………………. } ?>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s