Social Networks

The Google+ Circles screen allows you to drag-and-drop your friends into different friend categories without page refresh. This article will help you to Google plus style drag and drop adding friends in groups or circle implementation in your site using jquery and php.

Google plus style drag and drop adding friends in groups or circle.
This is really nice to have such kind of functionality for the end users.
Drag and drop pictures in the different circle without the page refresh.

Google plus circle implementation so cool, same way we have tried similar user groups adding application with drag and drop effect using  jquery and php. I hope it’s useful for your social media web projects.

Here you will get in this article for the Google style drag and drop for adding group –

1) Implementation Guide

2) Live Demo

3) Download Script

Click on the below image to view the live demo. Note that Google Plus Style Drag and Drop adding Groups demo do not use database. Download script for the database implementation.

Google Drag and drop demo

View Demo link 2

live-demo-tech-blog

Download Script

download script

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

Members
Table contains members(users) data such as member_idmember_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`)

);

Groups
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 UPDATECURRENT_TIMESTAMP,
PRIMARY KEY (`group_id`),
KEY `sort` (`sort`)
);

User_group
Members and Groups table relationship table contains user_id(same as memeber_id),group_idmember_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`)
);

Javascript
Here draggable applying for two classes .members and .group

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<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(!$this.is(':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>

groups.php

<?php
require_once("multipleDiv.inc.php");
// 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>";
}
}
?>
</div>
</div>

multipleDiv.inc.php
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
{
........................
........................
.........................
} 
?>

Demo no database connection. Download Script DB version works fine.

credit – 9lessons

None found.
  1. I was able to do this by changing line 100 in multipleDiv.inc.php

    to $html .= “”.$a[‘member_name’].”\n”;

    The problem that I am left with is that when you drag a person out of a group the name label is still there until you make another change. I am having trouble locating how to fix this error. Thanks to anyone who is able to help.

  2. This is awesome. I was just wondering if there was a way to keep the name with the image when it goes into the group instead of just the image? Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>