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中使用explode查找某个字符是否存在的方法
Jul 12 PHP
Linux下实现PHP多进程的方法分享
Aug 16 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
May 06 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
Nov 12 PHP
php使用PDO操作MySQL数据库实例
Dec 30 PHP
thinkPHP查询方式小结
Jan 09 PHP
PHP并发多进程处理利器Gearman使用介绍
May 16 PHP
PHP上传图片类显示缩略图功能
Jun 30 PHP
php进行ip地址掩码运算处理的方法
Jul 11 PHP
php 时间time与日期date之间的使用详解及区别
Nov 07 PHP
php PDO属性设置与操作方法分析
Dec 27 PHP
laravel框架创建授权策略实例分析
Nov 22 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 和 COM
2006/10/09 PHP
PHP循环获取GET和POST值的代码
2008/04/09 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
php输出图像的方法实例分析
2017/02/16 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
详解flask入门模板引擎
2018/07/18 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python实现画图工具
2020/08/27 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
国际象棋商店:The Chess Store
2018/07/09 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
影视制作岗位职责
2013/12/04 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python