PHP implements the drag-and-drop group effect for Google plus Friends. googleplus

PHP implements the drag-and-drop group effect for Google plus Friends. googleplus

Are you always looking for google pls's friend drag/drop group function? Google is amazing! I have used PHP and jQuery to implement the same friend drag-and-drop application for grouping. This PHP tutorial will show you how to implement it. I hope my example will be helpful to your social network project.

The effect is as follows:

The sample database contains three tables, that is, the relationship between users and user groups.

User table Members

A table contains member (User) data, such as member_id and member_image.

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

User Group Groups

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

Relationship between user groups User_group

The relationship table user_group of the user and user rent table contains the user_id (same as memeber_id), group_id, member_id (), and sort (sort) fields.

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 script

We use drag and drop for two class attributes:. 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

Here we will process the data processing function of adding user groups by dragging them.

<?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 "\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;' ></div>"; echo "<div id='removed".$group_id."' class='remove' style='display:none;' ></div>"; echo "<ul>\n"; echo $obj->updateGroups($group_id); echo "</ul></div>"; } } ?> </div> </div> 

MultipleDiv. inc. php

Modify the database connection information here.

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

Here, we have finished the drag and drop grouping function for Google plus friends. The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.