个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章PHP实现Google plus的好友拖拽分组效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

效果如下:

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

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

用户表Members 。

表包含成员(用户)数据,如member_id,member_image等.

?
1
2
3
4
5
6
7
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 。

?
1
2
3
4
5
6
7
8
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(排序)字段.

?
1
2
3
4
5
6
7
8
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运用拖拽.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<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 。

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?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 。

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Database declaration's
define( "SERVER" , "localhost" );
define( "USER" , "username" );
define( "PASSWORD" , "password" );
define( "DB" , "database" );
 
class Multiplediv
{
........................
........................
.........................
}
?>

到这里，我们关于如何实现Google plus 的好友拖拽分组功能就完成了。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

最后此篇关于PHP实现Google plus的好友拖拽分组效果的文章就讲到这里了,如果你想了解更多关于PHP实现Google plus的好友拖拽分组效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： JavaScript的null和undefined区别示例介绍
文章推荐： iOS Runntime 动态添加类方法并调用-class_addMethod
文章推荐： iOS常用加密算法介绍和代码实践
文章推荐： PHP与服务器文件系统的简单交互
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com