Are you looking for Google plus style drag and drop adding friends in groups or circle. Google plus circle implementation so cool, same way I 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.
Download Script 
Live DemoDeveloper
Sample database contains three tables and relationship between Members and Groups.
Members
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`)
);
`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 UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`group_id`),
KEY `sort` (`sort`)
);
`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`)
);
User_group
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`)
);
`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>
<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>
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
{
........................
........................
.........................
}
?>
// Database declaration's
define("SERVER", "localhost");
define("USER", "username");
define("PASSWORD", "password");
define("DB", "database");
class Multiplediv
{
........................
........................
.........................
}
?>
hi....
it's very good and working fine...
one mistake is there by miss....
just move same element nearby it place in group.... it'll add again...in same group.
yes there is one error . when we drag even through the nearby group . it shows +1 there also and where we drop the element plus one comes in that group also .
@Deven thanks for mention.. This is not happening in DB version...
Demo no database connection. Download Script DB version works fine.
nice :)
Hey Not working on Mozilla 3.6.22
NICE, codrop have a similar circular effects, i think when combine with this can be great
Sweet!
I love this, and it looks great, but there are a few problems with it.
1: When you drag a portrait over a group, without releasing it, then drag to a different group, and so on, it creates the animation like you dropped it on that group even though you didn't.
2: Once an object is in a group, if you drag it to a different group, the picture of the portrait is behind the group layer instead of in front while dragging it.
Both of these things happen when testing in chrome as well as ie.
However, in IE, there's another problem. Once you drop an image onto a group, if you try to change what group that portrait is in, it looks like it lets you, but doesn't actually show that the picture has changed, and instead, the portrait just disappears completely until you refresh/reload the page.
Thanks!
great work
when you move an object over a group, without releasing it, the whole object get killed, and doesn't get back anymore
Hi My Friend
Good Ideas
It is maybe more interesting to do the drag and drop in html5
I didn't really like this.But a great try. Keep it up
Its a great tutorial... i love the ease of classifying my friends into various groups.
There are defaut in your script, when i drop a same profil in the case "Family for exemple" he duplicate the member :D
Demo is JavaScript edition some problems. Download script working fine with DATABASE connection.
Its amazing...
Can we set a maximum per group?
Good
good work there bro, my question is on the functionality of google image dropping to mysql using php
have a problem, when I ran it alone works fine, bt when I implement it to my site doesnt work, do u no if this has problems with...
jquery.js,
jquery-min.js,
jquery-watermark.js,
jquery-ui.js,
jquery-livequery.js,
jquery-form.js
libreries???
Hi. the only thing I wanted to change was to be able to have the person's name show up in the group boxes along with the image. I was able to do this by also retrieving the b.member_name on line 96 in the mysql query in multipleDiv.inc.php and then just adding the result of $a['member_name'] in the line 100.
The problem that I am left with is that when you drag a person out of the box the name label stays there until you make another change. Is there anyone that would be able to assist in helping me find a way to fix this? Thanks.
Hi Srinivas, I think a bunch of people will be as clueless as I am. Could you make your download to have eclipse project/settings so that we can more easily have an idea as to how to run it locally? or maybe a readme.txt that can explain what we need to do to get it running locally. thank you very much.
Great work
When I use this any js that's been done on the first paeg load wont pull again when multipleDiv.inc.php gets called is there a way around this?
Regards
very nice..
uaooo your work really good :D
Hey, this can be more like the google plus circles if there was the multiple drag and drop feature.
I already implemented a jQuery plugin (Click Here!) that does that. You could integrate it with your work, to make it more like google plus.
Thats nice, Bro many many thanks for share, keep it up.........
Another problem, try to double click image inside group, You can clone it over and over again. How to prevent this?