PHP实现Google plus的好友拖拽分组效果

你一直在寻找google pls的好友拖拽分组功能吗？google实现的太帅了！我已经使用php和jquery实现了同样的好友拖拽添加分组的应用。本篇php教程就来告诉你如何实现，希望我的示例会对你的社交网站项目有所帮助。

效果如下：

示例数据库包含三个表，即用户和用户组之间的关系。

用户表members

表包含成员(用户)数据,如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`) 
); 

用户组之间的关系user_group

用户和用户租表的关系表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`) 
); 

javascript脚本

我们对两个类属性：.members和.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

在这里修改数据库连接信息。

<?php 
// database declaration's 
define("server", "localhost"); 
define("user", "username"); 
define("password", "password"); 
define("db", "database"); 
 
class multiplediv 
{ 
........................ 
........................ 
......................... 
} 
?> 

到这里，我们关于如何实现google plus 的好友拖拽分组功能就完成了。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。