你一直在寻找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 的好友拖拽分组功能就完成了。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持硕编程。
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！