PHP implementation of Google Plus friend drag group effect _php Example

Have you been looking for Google pls's buddy drag-and-drop grouping feature? Google is awesome! I've used PHP and jquery to implement the same buddy drag-and-drop app for adding packets. This PHP tutorial will tell you how to do this, and I hope my regular sample helps with your social networking project.

The effect is as follows:

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

User Table Members

Tables contain member (user) data, such as Member_id,member_image.

CREATE TABLE IF not EXISTS "members" ( 
' member_id ' int (9) Not NULL auto_increment, 
' member_name ' varchar () NULL, 
' member_image ' text not NULL, 
' dated ' timestamp NOT null DEFAULT current_timestamp on UPDATE current_timest AMP, 
PRIMARY KEY (' member_id ') 

User group groups

CREATE TABLE IF not EXISTS ' groups ' ( 
' group_id ' int (9) auto_increment, 
' group_name ' varchar (), 
' sort ' Int (9), 
' date ' timestamp DEFAULT current_timestamp on UPDATE current_timestamp, 
PRIMARY KEY (' group_id ') 
, KEY ' sort ' (' sort ') 
); 

Relationships between user groups User_group

The relationship table User_group user and User Rent table contains user_id (memeber_id), group_id,member_id (), and sort (sort) fields.

CREATE TABLE IF not EXISTS ' User_group ' ( 
' id ' int (9) is not NULL auto_increment, 
' user_id ' int (9) is not NULL, 
' group_id ' int (9) Not NULL, 
' member_id ' int (9) is not NULL, 
' sort ' int (9) is not NULL, 
PRIMARY KEY (' id ') 

JavaScript script

We have two class attributes:. Members and. Group use drag and drop.

<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 (':d ata (draggable))} {$this. draggable ({helper: "Clone", Containment: $ ("#demo-frame"). Length? 
"#demo-frame": "Document", cursor: "Move"}); 
} 
}); Initiate droppable for groups//adding members to groups//removing Members from groups//Shift one GRO 
Up 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'll restore into public groups or non grouped members function removemember (g_i d,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

We are here to handle the data processing capabilities of the drag and drop add user group.

<?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 per 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 (!iss 
ET ($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)) $g 
roups = $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; ' > "; 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 are done with how to implement Google Plus's buddy drag-and-drop grouping feature. The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.