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....
ReplyDeleteit'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 .
ReplyDelete@Deven thanks for mention.. This is not happening in DB version...
ReplyDeleteDemo no database connection. Download Script DB version works fine.
ReplyDeletenice :)
ReplyDeleteHey Not working on Mozilla 3.6.22
ReplyDeleteNICE, codrop have a similar circular effects, i think when combine with this can be great
ReplyDeleteSweet!
ReplyDeleteI love this, and it looks great, but there are a few problems with it.
ReplyDelete1: 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!
when you move an object over a group, without releasing it, the whole object get killed, and doesn't get back anymore
ReplyDeleteHi My Friend
ReplyDeleteGood Ideas
It is maybe more interesting to do the drag and drop in html5
ReplyDeleteI didn't really like this.But a great try. Keep it up
ReplyDeleteIts a great tutorial... i love the ease of classifying my friends into various groups.
ReplyDeleteThere are defaut in your script, when i drop a same profil in the case "Family for exemple" he duplicate the member :D
ReplyDeleteDemo is JavaScript edition some problems. Download script working fine with DATABASE connection.
ReplyDeleteIts amazing...
ReplyDeleteCan we set a maximum per group?
ReplyDeleteGood
ReplyDeletegood work there bro, my question is on the functionality of google image dropping to mysql using php
ReplyDeletehave 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...
ReplyDeletejquery.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.
ReplyDeleteThe 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.
ReplyDeleteGreat work
ReplyDeleteWhen 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?
ReplyDeleteRegards
very nice..
ReplyDeleteuaooo your work really good :D
ReplyDeleteThats nice, Bro many many thanks for share, keep it up.........
ReplyDeleteAnother problem, try to double click image inside group, You can clone it over and over again. How to prevent this?
ReplyDeleteGreat tutorial.
ReplyDeleteThanks bud.
Thanks, the actual structure helped me a lot, rewrote your code and integrated it in to codeigniter, thanks man
ReplyDeleteHi Arun Kumar..........Good valuable post.....Keep it up.........
ReplyDeleteIt so great that what I want, but one there is an problem with IE about drag and drop friends.
ReplyDeleteAny one help me please !
Hello.
ReplyDeletei found a bug.. when i try to move the "friend" inside the circle he just multply.
sorry the english
var g_id = $(this).attr('id');
ReplyDeletevar image_src = $("#mem"+m_id).find("img").attr("src");
var image_rel = $("#mem"+m_id).find("img").attr("rel");
var image_alt = $("#mem"+m_id).find("img").attr("alt");
if($('#'+g_id+' li.li_'+image_rel+' img:visible').length > 0){
return false;
}
that is really nice script, but why it not round like google circle ?
ReplyDeleteoh my god! thanks brother... very thanks.
ReplyDeletedrag over and past a box then let go. gone.
ReplyDeletehas a huge bug, if you drag someone in the box, and drag the same person in the same box it duplicates the user as many times you want
ReplyDeleteDemos is not connected with Database pure HTML version. This about issue will not happen in Download script.
ReplyDeletewhat doyou cant make emoticon chat like gmail?if you hover trick framecount and spirite?
ReplyDeletei am unable to download the script i already subscribed thn also i am unable to download!
ReplyDelete