温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

粗略模仿google+圈子拖拽效果   -----   JQUERY特效模板

发布时间:2020-06-25 12:26:19 来源:网络 阅读:518 作者:ivyandrich 栏目:web开发

   也是之前做的一个功能,相对于之前的完美版本,目前手头只有个最开始做的草稿版,只支持firefox,但是之前完美版本已经找不到了,很悲催,这就是不知道总结的下场。


   不过还是希望能够留下一个功能稍微正常的版本,于是这次又重新检查了一遍,略作修改,至少能兼容firefox和chrome,ie(只看过几个版本),甚是粗略。


    拖拽用户到圈子范围内效果:

    粗略模仿google+圈子拖拽效果   -----   JQUERY特效模板

    拖拽用户到圈子范围内并放开鼠标效果:

   粗略模仿google+圈子拖拽效果   -----   JQUERY特效模板


   全部代码可以去附件里找,这里只贴出主要逻辑:


     

$("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
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI