也是之前做的一个功能,相对于之前的完美版本,目前手头只有个最开始做的草稿版,只支持firefox,但是之前完美版本已经找不到了,很悲催,这就是不知道总结的下场。
不过还是希望能够留下一个功能稍微正常的版本,于是这次又重新检查了一遍,略作修改,至少能兼容firefox和chrome,ie(只看过几个版本),甚是粗略。
拖拽用户到圈子范围内效果:
拖拽用户到圈子范围内并放开鼠标效果:
全部代码可以去附件里找,这里只贴出主要逻辑:
$("li[id^='t']").Drag(
{
//鼠标按下时,先把被选中的用户资料复制到拖拽框中,然后可以有一些相对的样式变化
MouseDown:function(e)
{
uid = $(this).attr("id").replace(/t/,"");
mflag=true;
var scrolltop = parseInt($(document).scrollTop());
$("#dragon").fadeTo("fast",0.7);
$("#dragon").show();
$("#dragon").css("left",(parseInt(e.clientX)-10)+"px");
$("#dragon").css("top",(parseInt(e.clientY)-10 + scrolltop)+"px");
$("#dragon").html($('#t'+uid).html());
},
//当鼠标移动到或者移出某个圈子的范围之内时,触发该圈子的mouseover事件或mouseout事件
MouseMove:function(e)
{
if(mflag == true)
{
var scrolltop = parseInt($(document).scrollTop());
var mleft = mouse_pos[0] = parseInt(e.clientX);
var mtop = mouse_pos[1] = parseInt(e.clientY);
$("#dragon").show();
$("#dragon").css("left",(mleft-10)+"px");
$("#dragon").css("top",(mtop-10 + scrolltop)+"px");
$("div[id^='circle_sub_']").each(
function()
{
var tmppos = $(this).offset();
tmppos.top=tmppos.top-scrolltop;
if(mleft > tmppos.left && mleft < (parseInt(tmppos.left) + parseInt($(this).width())) && mtop > tmppos.top && mtop < (parseInt(tmppos.top) + parseInt($(this).height())))
{
$(this).trigger("mouseover");
}
else
{
$(this).trigger("mouseout");
}
}
);
}
},
//鼠标抬起时,如果拖拽框在某个圈子范围内,触发添加圈子用户的动作
MouseUp:function(e)
{
if(mflag == true)
{
mflag = false;
var scrolltop = parseInt($(document).scrollTop());
var mleft = parseInt(e.clientX);
var mtop = parseInt(e.clientY);
$("#dragon").fadeTo("fast",1);
$("#dragon").hide();
if(uid > 0)
{
$("div[id^='circle_sub_']").each(
function()
{
var tmpid = $(this).attr("id").replace(/circle_sub_/,"");
var tmppos = $(this).offset();
tmppos.top=tmppos.top-scrolltop;
if(mleft > tmppos.left && mleft < (parseInt(tmppos.left) + parseInt($(this).width())) && mtop > tmppos.top && mtop < (parseInt(tmppos.top) + parseInt($(this).height())))
{
$("#sub_node_"+tmpid).trigger("add_node",[uid]);
uid = 0;
}
}
);
}
}
},
MoveObj:$("#dragon"),
OffMask:true,
OffMod:true,
BindInBox:false
}
);
附件:http://down.51cto.com/data/2363938