PHP如何实现Googleplus的好友拖拽分组效果-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

PHP如何实现Googleplus的好友拖拽分组效果-创新互联

这篇文章主要介绍PHP如何实现Google plus的好友拖拽分组效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联专注于企业营销型网站、网站重做改版、张家界网站定制设计、自适应品牌网站建设、H5技术购物商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为张家界等各大城市提供网站开发制作服务。

效果如下:

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

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


用户表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运用拖拽。


 
 
 
 
$(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(); 
$( "
  • " ).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); });  }  });  }  }); 

    groups.php

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


    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 
     
     
     
    public_members(); 
    if($members) 
    { 
    foreach($members as $member) 
    { 
    extract($member); 
    echo "\n"; 
    echo "\n"; 
    echo "".ucwords($member_name)."\n"; 
    echo "
    ";  }  }  else  echo "Members not available";  ?> 
        Groups    groups();  if($groups)  {  foreach($groups as $group)  {  extract($group);  echo "\n";  echo ucwords($group_name);  echo "
    ";  echo "";  echo "";  }  }  ?>   

    multipleDiv.inc.php

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

    以上是“PHP如何实现Google plus的好友拖拽分组效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


    网站题目:PHP如何实现Googleplus的好友拖拽分组效果-创新互联
    链接分享:http://kswsj.cn/article/ccshih.html