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 的好友拖拽分组功能就完成了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了源码分析系列之json_encode()如何转化一个对象,对json_encode()感兴趣的同学,可以参考下...2021-04-22
- PHP去除html、css样式、js格式的方法很多,但发现,它们基本都有一个弊端:空格往往清除不了 经过不断的研究,最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02
- index.php怎么打开?初学者可能不知道如何打开index.php,不会的同学可以参考一下本篇教程 打开编辑:右键->打开方式->经文本方式打开打开运行:首先你要有个支持运行PH...2017-07-06
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
复制代码 代码如下:<?php function jb51(){ print_r(func_get_args()); echo "<br>"; echo func_get_arg(1); echo "<br>"; echo func_num_args(); } jb51("www","j...2013-10-04- 这篇文章主要介绍了PHP编程 SSO详细介绍及简单实例的相关资料,这里介绍了三种模式跨子域单点登陆、完全跨单点域登陆、站群共享身份认证,需要的朋友可以参考下...2017-01-25
- 这篇文章主要介绍了PHP实现创建以太坊钱包转账等功能,对以太坊感兴趣的同学,可以参考下...2021-04-20
javascript轻量级库createjs使用Easel实现拖拽效果
这篇文章主要介绍了javascript轻量级库createjs使用Easel实现拖拽效果的相关资料,需要的朋友可以参考下...2016-02-21- 这篇文章主要为大家详细介绍了php微信公众账号开发之五个坑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-02
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
首先是数据库的设计。分类表叫cate.我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id。数据库有内容后,就可以开始写代码,进...2014-05-31- 这篇文章主要介绍了PHP如何通过date() 函数格式化显示时间,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-13
- 今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上。...2015-03-15
- 这篇文章主要介绍了golang与php实现计算两个经纬度之间距离的方法,结合实例形式对比分析了Go语言与php进行经纬度计算的相关数学运算技巧,需要的朋友可以参考下...2016-07-29
- 这篇文章主要介绍了PHP如何使用cURL实现Get和Post请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-11
- 经常看到有人踩在了PHP路径的坑上面了,感觉有必要来说说PHP中相对路径的一些坑,以及PHP中绝对路径的使用,下面一起来看看。 ...2016-08-24
- 这篇文章主要介绍了thinkPHP中多维数组的遍历方法,以简单实例形式分析了thinkPHP中foreach语句的使用技巧,需要的朋友可以参考下...2016-01-12
- 这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容,实用性非常,感兴趣的朋友参考下吧...2016-05-06
- 这篇文章主要介绍了javascript拖拽效果延伸的学习,关于拖拽延伸出来的一些效果,感兴趣的朋友可以参考一下...2016-04-06
- 这篇文章主要为大家详细介绍了php构造方法中析构方法在继承中的表现,感兴趣的小伙伴们可以参考一下...2016-04-15
- 这篇文章主要介绍了jQuery+PHP+MySQL实现无限级联效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-02-21
- 这篇文章主要介绍了js实现的简练高效拖拽功能,通过对js鼠标事件的扩展实现拖拽效果,非常简单实用,需要的朋友可以参考下...2017-01-09