粗略模仿google+圈子拖拽效果 ----- JQUERY特效模板
2014-02-21 12:34
357 查看
也是之前做的一个功能,相对于之前的完美版本,目前手头只有个最开始做的草稿版,只支持firefox,但是之前完美版本已经找不到了,很悲催,这就是不知道总结的下场。
不过还是希望能够留下一个功能稍微正常的版本,于是这次又重新检查了一遍,略作修改,至少能兼容firefox和chrome,ie(只看过几个版本),甚是粗略。
拖拽用户到圈子范围内效果:
拖拽用户到圈子范围内并放开鼠标效果:
全部代码可以去附件里找,这里只贴出主要逻辑:
因为此地不可上传附件,所以只好作为资源上传,里边有完整实例,已经测试firefox和chrome,都兼容。
http://download.csdn.net/detail/ivyandrich/6944909
不过还是希望能够留下一个功能稍微正常的版本,于是这次又重新检查了一遍,略作修改,至少能兼容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 } );
因为此地不可上传附件,所以只好作为资源上传,里边有完整实例,已经测试firefox和chrome,都兼容。
http://download.csdn.net/detail/ivyandrich/6944909
相关文章推荐
- 粗略模仿google+圈子拖拽效果 ----- JQUERY特效模板
- 一个简单的图片拖拽排序效果 &nbsp; ----- &nbsp; JQUERY特效模板
- 一个简单的图片拖拽排序效果 ----- JQUERY特效模板
- 模仿手机QQ底部导航栏Icon拖拽效果
- 模仿ajax拖拽效果
- js拖拽效果 (制作模板)
- C# 模仿QQ、MSN消息提示系列 四、bug修改 效果优化
- 模仿微信选择群组成员的搜索效果(退格删除成员)
- 【Unity3D自学记录】实现地球仪般拖拽旋转的效果
- ajax翻页效果模仿yii框架自己写的
- google+钉子效果
- 基于jquery的一个拖拽到指定区域内的效果
- jQuery实现模仿微博下拉滚动条加载数据效果
- Flash打字效果模板
- [转载] 模仿淘宝列表页面的工具栏随屏幕滚动效果
- bootstrap模态框实现拖拽效果
- JQ实现3D拖拽效果
- flipsnap实现手机屏幕左右拖拽滑动效果的框架
- Android弹幕功能实现,模仿斗鱼直播的弹幕效果
- 表格拖拽效果(贴上所有代码)