PHP to implement Google Plus's buddy drag group effect

Have you been looking for Google pls's buddy drag-and-drop grouping feature? Google is too handsome to implement! I've used PHP and jquery to implement the same buddy drag-and-drop app to add a group. This PHP tutorial will show you how to do this, and hopefully my sample can help you with your social networking projects.

The effect is as follows:

The sample database contains three tables, the relationship between the user and the user group.

User Table Members

The table contains 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 (UP) not NULL, ' MEMB Er_image ' text NOT NULL, ' dated ' timestamp NOT null DEFAULT current_timestamp on UPDATE current_timestamp,primary KEY (' mem ber_id '));

User group groups

CREATE TABLE IF not EXISTS ' groups ' (' group_id ' int (9) auto_increment, ' group_name ' varchar ($), ' sort ' int (9), ' Date ' time Stamp DEFAULT current_timestamp on UPDATE current_timestamp,primary key (' group_id '), key ' sort ' (' sort '));

The relationship between user groups User_group

The relational table for user and user leases User_group 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) N OT null, ' member_id ' int (9) Not NULL, ' sort ' int (9) Not null,primary KEY (' id '));

JavaScript scripts

We use drag-and-drop on two class properties:. 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 Groupsvar $gallery = $ (". Memb ERS,. 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, into groups//removing members from groups//Shift members one group to a nother$ (". 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 ');d roppublic (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", +); RemoveMember (g_id,m_id);});}); /ADD or shift members from Groupsfunction 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": "Ten"},10); $ ("#added" +g_id). Show (); $ ("#added" +g_ ID). Animate ({"Margin-top": " -50px"}, 0px), $ ("#added" +g_id). Animate ({"Margin-top": "", "opacity": "0"}, 450);});});} Remove memebers from groups//It would restore into public groups or non grouped membersfunction 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": "Ten"},10), $ ("#removed" +g_id). Show (); $ ("#removed" +g_id). Animate ({"Margin-top": " -50px"}, ("#removed" +g_id). Animate ({"margin-top": "0px", "opacity": "0"}, groups.php?reload); $.get Data) {$ ("#public"). HTML (data);});});}); </script>

groups.php

We are here to handle drag-and-drop data processing capabilities for adding user groups.

<?phprequire_once ("multipleDiv.inc.php");//Initiate object$obj = new Multiplediv ();//ADD or Update Ajax callif ( 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 Callif (isset ($_get[' do ')) {$obj->removemember ($_get[' mid ']); exit;} Reload groups each Ajax Callif (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--><?phpif (!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> ";}} Elseecho "Members not available";? ></div><div id= "Groupsall" >Groups<!--Initiate Groups--><?phpif (!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 ' Sdefine ("SERVER", "localhost");d efine ("USER", "username");d efine ("PASSWORD", " Password ");d efine (" DB "," Database ");  Class multiplediv{... ...? .... .... ...}? ..... ...}? ..... ...}? ..................................... >

Here, we're done with the drag-and-drop grouping of friends on how to implement Google Plus. The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.