PHP는 Google plus_php 예제에서 친구의 드래그 앤 드롭 그룹화 효과를 구현합니다.

구글 PLS의 드래그 앤 드롭 친구 그룹화 기능을 찾아보셨나요? Google의 구현은 정말 멋지네요! 저는 PHP와 jQuery를 사용하여 친구를 끌어서 그룹을 추가하는 것과 동일한 애플리케이션을 구현했습니다. 이 PHP 튜토리얼에서는 이를 구현하는 방법을 알려 드리겠습니다. 제 예제가 귀하의 소셜 네트워킹 사이트 프로젝트에 도움이 되기를 바랍니다.

효과는 다음과 같습니다.

샘플 데이터베이스에는 사용자와 사용자 그룹 간의 관계라는 세 개의 테이블이 포함되어 있습니다.

사용자 테이블 멤버

테이블에는 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`) 
); 

자바스크립트

두 가지 클래스 속성인 .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 &#63; "#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&#63;m_id="+m_id+"&g_id="+g_id, 
cache:false, 
success:function(response){ 
$.get("groups.php&#63;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&#63;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&#63;reload", function(data){ $("#public").html(data); }); 
} 
}); 
} 
}); 
</script> 

groups.php

여기에서는 사용자 그룹을 드래그하고 추가하는 데이터 처리 기능을 처리합니다.

<&#63;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(); 
&#63;> 
Friends 
<div id="main_portion"> 
<div id="public"> 
<!-- Initiate members --> 
<&#63;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"; 
&#63;> 
</div> 
<div id="groupsall"> 
Groups 
<!-- Initiate Groups --> 
<&#63;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>"; 
} 
} 
&#63;> 
</div> 
</div> 

multipleDiv.inc.php

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

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

이제 구글 플러스의 드래그 앤 드롭 친구 그룹화 기능 구현 방법은 모두 끝났습니다. 이상이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되길 바랍니다.