PHP实现Google plus的好友拖拽分组功能(1)(2)

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(':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>