PHP는 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`)
);

사용자 그룹 그룹

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(member_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(&#39;:data(draggable)&#39;))
{
$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(&#39;rel&#39;);
if(!m_id)
{
casePublic = true;
var m_id = $(ui.draggable).attr("id");
m_id = parseInt(m_id.substring(3));
}
var g_id = $(this).attr(&#39;id&#39;);
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(&#39;rel&#39;);
var g_id = $(this).attr(&#39;id&#39;);
$(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[&#39;m_id&#39;]) and isset($_GET[&#39;g_id&#39;]))
{
$obj->addMembers((int)$_GET[&#39;m_id&#39;], (int)$_GET[&#39;g_id&#39;]);
exit;
}
// Remove Memebers from groups Ajax call
if(isset($_GET[&#39;do&#39;]))
{
$obj->removeMember($_GET[&#39;mid&#39;]);
exit;
}
// Reload groups each ajax call
if(isset($_GET[&#39;reload&#39;])){ echo $obj->getMembers_reload(); exit; }
if(isset($_GET[&#39;reload_groups&#39;])){ 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=&#39;members&#39; id=&#39;mem".$member_id."&#39;>\n";
echo "<img src=&#39;images/".$member_image."&#39; rel=&#39;".$member_id."&#39;>\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=&#39;".$group_id."&#39; class=&#39;group&#39;>\n";
echo ucwords($group_name);
echo "<div id=&#39;added".$group_id."&#39; class=&#39;add&#39; style=&#39;display:none;&#39; ><img src=&#39;images/green.jpg&#39;></div>";
echo "<div id=&#39;removed".$group_id."&#39; class=&#39;remove&#39; style=&#39;display:none;&#39; ><img src=&#39;images/red.jpg&#39;></div>";
echo "<ul>\n";
echo $obj->updateGroups($group_id);
echo "</ul></div>";
}
}
?>
</div>
</div>

multipleDiv.inc.php

여기서 데이터베이스 연결 정보를 수정하세요.

<?php
// Database declaration&#39;s
define("SERVER", "localhost");
define("USER", "username");
define("PASSWORD", "password");
define("DB", "database");
  
class Multiplediv
{
........................
........................
.........................
}
?>

이제 구글 플러스의 드래그 앤 드롭 친구 그룹화 기능 구현 방법이 끝났습니다. 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 PHP 중국어 웹사이트를 지지해 주시길 바랍니다.

Google 플러스의 드래그 앤 드롭 친구 그룹화 효과에 대한 PHP 구현과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!