Google Plus Style Drag and Drop adding Groups
Wall Script
Follow Me:
Wednesday, September 21, 2011

Google Plus Style Drag and Drop adding Groups

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.

Google Plus Style Drag and Drop adding Groups


Download Script     Live Demo

Developer
Arun Kumar Shekar
Arun Kumar Sekar
Engineer
Chennai, INDIA

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`)
); 

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`)
); 

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`)
);

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
{
........................
........................
.........................
}
?>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


43 comments:

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

    ReplyDelete
  2. 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
  3. @Deven thanks for mention.. This is not happening in DB version...

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

    ReplyDelete
  5. Hey Not working on Mozilla 3.6.22

    ReplyDelete
  6. NICE, codrop have a similar circular effects, i think when combine with this can be great

    ReplyDelete
  7. 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!

    ReplyDelete
  8. when you move an object over a group, without releasing it, the whole object get killed, and doesn't get back anymore

    ReplyDelete
  9. It is maybe more interesting to do the drag and drop in html5

    ReplyDelete
  10. I didn't really like this.But a great try. Keep it up

    ReplyDelete
  11. Its a great tutorial... i love the ease of classifying my friends into various groups.

    ReplyDelete
  12. There are defaut in your script, when i drop a same profil in the case "Family for exemple" he duplicate the member :D

    ReplyDelete
  13. Demo is JavaScript edition some problems. Download script working fine with DATABASE connection.

    ReplyDelete
  14. Can we set a maximum per group?

    ReplyDelete
  15. good work there bro, my question is on the functionality of google image dropping to mysql using php

    ReplyDelete
  16. 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???

    ReplyDelete
  17. 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.

    ReplyDelete
  18. 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.

    ReplyDelete
  19. 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

    ReplyDelete
  20. uaooo your work really good :D

    ReplyDelete
  21. Thats nice, Bro many many thanks for share, keep it up.........

    ReplyDelete
  22. Another problem, try to double click image inside group, You can clone it over and over again. How to prevent this?

    ReplyDelete
  23. Great tutorial.
    Thanks bud.

    ReplyDelete
  24. Thanks, the actual structure helped me a lot, rewrote your code and integrated it in to codeigniter, thanks man

    ReplyDelete
  25. Hi Arun Kumar..........Good valuable post.....Keep it up.........

    ReplyDelete
  26. It so great that what I want, but one there is an problem with IE about drag and drop friends.
    Any one help me please !

    ReplyDelete
  27. Hello.
    i found a bug.. when i try to move the "friend" inside the circle he just multply.
    sorry the english

    ReplyDelete
  28. var g_id = $(this).attr('id');
    var 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;
    }

    ReplyDelete
  29. that is really nice script, but why it not round like google circle ?

    ReplyDelete
  30. oh my god! thanks brother... very thanks.

    ReplyDelete
  31. drag over and past a box then let go. gone.

    ReplyDelete
  32. has 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

    ReplyDelete
  33. Demos is not connected with Database pure HTML version. This about issue will not happen in Download script.

    ReplyDelete
  34. what doyou cant make emoticon chat like gmail?if you hover trick framecount and spirite?

    ReplyDelete
  35. i am unable to download the script i already subscribed thn also i am unable to download!

    ReplyDelete

Make in India