你一直在寻找谷歌请的好友拖拽分组功能吗？谷歌实现的太帅了！我已经使用服务器端编程语言(专业超文本预处理器的缩写)和jQuery实现了同样的好友拖拽添加分组的应用。本篇服务器端编程语言(专业超文本预处理器的缩写)教程就来告诉你如何实现，希望我的示例会对你的社交网站项目有所帮助。

效果如下：

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

用户表成员

表包含成员（用户)数据，如成员id，成员图像等。

如果"成员"不存在，则创建表('成员_ id'int(9)不为空'自动增量'成员_ name'varchar(220)不为空，'成员'图像'文本不为空，'日期'时间戳不为空更新当前时间戳时的默认当前时间戳，主键('成员_ id’)；用户组组

CREATE TABLE IF NOT EXISTS ` group `(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 `))；用户组之间的关系用户_组

用户和用户租表的关系表用户_组包含用户id(成员id一样),组id，成员id()和排序（排序)字段。

如果不存在则创建表` user _ group `(` id ' int(9)NOT NULL AUTO _ INCREMENT，` user _ id ' int(9)NOT NULL，` group _ id ' int(9)NOT NULL，` sort ' int(9)NOT NULL，PRIMARY KEY(` id `))；爪哇岛描述语言脚本

我们对两个类属性：成员和。组运用拖拽。

脚本类型=' text/JavaScript ' src=' http :https://Ajax。谷歌api。com/Ajax/libs/jquery/1。6 .2/jquery。js /脚本类型=' text/JavaScript ' src=' http :https://Ajax。谷歌api。com/Ajax/libs/jquery yui/1。8 .14/jquery-ui。js /脚本脚本脚本类型='文本成员，group’)；$('img '，$gallery).live('mouseenter '，function(){ var $ this=$(this)；if(！这个。is(' : data(draggable)'){ $ this。可拖动({ helper : ' clone '，containment: $('#demo-frame ').长度？#demo-frame' : 'document '，光标： ' move ' })；} });//为组启动可删除//向组中添加成员//从组中删除成员//将成员从一个组转移到另一个组$()。组')。livequery(function(){ var casePublic=false；$(这个)。drop able({ active class : ' 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。子串(3))；} var g_id=$(this).attr(' id ')；dropPublic(m_id，g_id，casePublic)；$('#mem' m_id).hide()；$('li/li ').html(ui.draggable).appendTo(这个);}，out:函数（事件，ui) { var m_id=$(ui.draggable).attr(' rel ')；var g_id=$(this).attr(' id ')；$(ui.draggable).隐藏('爆炸',1000);removeMember(g_id，m _ id)；} });});//从组中添加或移动成员函数dropdublic(m _ id，g_id，caseFrom) { $ .ajax({ type:'GET '，url:'groups.php？m_id=' m_id 'g_id=' g_id '，cache:false，success :函数(响应){ $ .get('groups.php？reload _ groups '，函数（数据){ $(“# group sall”).html(数据);$("# add"g _ id).动画({ '不透明度' : '10' },10);$("# add"g _ id).show()；$("# add"g _ id).动画({'margin-top': '-50px'}，450)；$("# add"g _ id).动画({'margin-top': '0px '，' opacity' : '0' }，450)；});} });} //从组中删除成员//它将恢复到公共组或非组成员函数removeMember(g_id，m_id) { $ .ajax({ type:'GET '，url:'groups.php？do=dropmid=' m_id，cache:false，success :函数(响应){ $(' # removed ' g _ id).动画({ '不透明度' : '10' },10);$(“# removed”g _ id).show()；$(“# removed”g _ id).动画({'margin-top': '-50px'}，450)；$(“# removed”g _ id).动画({'margin-top': '0px '，' opacity' : '0' }，450)；$.get('groups.php？重新加载'，函数（数据){ $('#public ').html(数据);});} });} });/脚本groups.php

我们在这里处理拖拽添加用户组的数据处理功能。

？PHP需要_ once(' multiplediv。Inc . PHP ')；//初始化对象$ obj=new Multiplediv()；//添加或更新Ajax调用if(isset($ _ GET[' m _ id '])和isset($ _ GET[' g _ id ']){ $ obj-addMembers((int)$ _ GET[' m _ id ']，(int)$ _ GET[' g _ id '])；退出；} //从组中移除成员Ajax调用if(已设置($ _ GET[' do ']){ $ obj-Remove成员($ _ GET[' mid '])；退出；} //重新加载对每个创建交互式、快速动态网页应用的网页开发技术调用进行分组if(isset($ _ GET[' Reload ']){ echo $ obj-getMembers _ Reload()；退出；} if(isset($ _ GET[' reload _ groups ']){ echo $ obj-getmembergroups _ reload()；退出；} //发起组和成员$ member=$ obj-public _ members()；$ group=$ obj-group()；friends div id=' main _ part ' div id=' public '！-发起成员？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 '；回声' '。ucwords($member_name). n '；echo '/div '；} } else回应"成员不可用";/div div id=' group sall ' group！-发起团体？php if(！isset($ group))$ group=$ obj-group()；if($ group){ foreach($ group 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 '；回声”ul n”；echo $ obj-updateGroups($ group _ id)；回声/ul/div '；} } ?/分区/multipleDiv.inc.php分区

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

？php /数据库声明的定义(“SERVER”、“localhost”)；定义('用户''用户名');定义(' PASSWORD '，' PASSWORD ')；定义('数据库','数据库');类别Multiplediv {..........} ?到这里，我们关于如何实现Google plus的好友拖拽分组功能就完成了。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。