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


Posted in PHP onOctober 21, 2016

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

效果如下:

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

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

用户表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 的好友拖拽分组功能就完成了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
PHP+Tidy-完美的XHTML纠错+过滤
Apr 10 PHP
PHP的加密方式及原理
Jun 14 PHP
PHP If Else(elsefi) 语句
Apr 07 PHP
百度地图API应用之获取用户的具体位置
Jun 10 PHP
laravel 5 实现模板主题功能(续)
Mar 02 PHP
标准PHP的AES加密算法类
Mar 12 PHP
thinkPHP下的widget扩展用法实例分析
Dec 26 PHP
PHP机器学习库php-ml的简单测试和使用方法
Jul 14 PHP
visual studio code 调试php方法(图文详解)
Sep 15 PHP
PHP Cli 模式设置进程名称的方法
Jun 12 PHP
PHP利用curl发送HTTP请求的实例代码
Jul 09 PHP
YII2 全局异常处理深入讲解
Mar 24 PHP
PHP与服务器文件系统的简单交互
Oct 21 #PHP
微信公众号开发客服接口实例代码
Oct 21 #PHP
PHP抓取远程图片(含不带后缀的)教程详解
Oct 21 #PHP
PHP Header用于页面跳转时的几个注意事项
Oct 21 #PHP
phpcms中的评论样式修改方法
Oct 21 #PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
Oct 20 #PHP
PHP中的多种加密技术及代码示例解析
Oct 20 #PHP
You might like
PHP EOT定界符的使用详解
2008/09/30 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python实现kMeans算法
2017/12/21 Python
详解python中的线程
2018/02/10 Python
python创建文件备份的脚本
2018/09/11 Python
Python用字典构建多级菜单功能
2019/07/11 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
反邪教标语
2014/06/23 职场文书
八项规定整改方案
2014/10/01 职场文书
硕士学位论文评语
2014/12/31 职场文书
爱的承诺书
2015/01/20 职场文书
师德承诺书2015
2015/04/28 职场文书
大学团日活动总结书
2015/05/11 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书