你一直在尋找google pls的好友拖拽分組功能嗎？google實(shí)現(xiàn)的太帥了！我已經(jīng)使用PHP和jQuery實(shí)現(xiàn)了同樣的好友拖拽添加分組的應(yīng)用。本篇PHP教程就來(lái)告訴你如何實(shí)現(xiàn)，希望我的示例會(huì)對(duì)你的社交網(wǎng)站項(xiàng)目有所幫助。

[[79207]]

實(shí)現(xiàn) Google plus 的好友拖拽分組功能

在線示例：Google plus 的好友拖拽分組功能

示例數(shù)據(jù)庫(kù)包含三個(gè)表，即用戶和用戶組之間的關(guān)系。

用戶表Members

表包含成員(用戶)數(shù)據(jù),如member_id,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`)  
); 

用戶組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`)  
); 

用戶組之間的關(guān)系User_group

用戶和用戶租表的關(guān)系表user_group包含user_id(memeber_id一樣),group_id,member_id()和sort(排序)字段。

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

#p#

Javascript腳本

我們對(duì)兩個(gè)類(lèi)屬性：.members和.group運(yùn)用拖拽。

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

#p#

groups.php

我們?cè)谶@里處理拖拽添加用戶組的數(shù)據(jù)處理功能。

<?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

在這里修改數(shù)據(jù)庫(kù)連接信息。

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

到這里，我們關(guān)于如何實(shí)現(xiàn)Google plus 的好友拖拽分組功能就完成了。源代碼：點(diǎn)此下載

原文鏈接：http://www.9lessons.info/2011/09/google-plus-style-drag-and-drop-adding.html