注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

拖拽  

2014-07-08 17:59:32|  分类: 实例 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
/*
 * 完美拖拽
 */
$.fn.drag = function (p) {
    var d = {

            // 父元素
            parent : $(document),

            // 子元素
            child : $(this),

            // 是否允许超出父元素
            isBeyond : false

        },
        o = $.extend(d, p || {}),
        isMove = false,
        d = $(this),
        DW = $(window).outerWidth() - d.outerWidth(),
        DH = $(window).outerHeight() - d.outerHeight(),
        X = Y = XMove = YMove = 0
    ;

    // 鼠标按下,激活拖拽
    o.child.mousedown(function(e) {
        isMove = true;
        X = e.clientX - d.offset().left;
        Y = e.clientY - d.offset().top;
        d.css({
            "position": "absolute",
            "z-index" : "10"
        });
    });

    // 激活拖拽
    o.parent.mousemove(function(e) {
        if(!isMove) return;
        XMove = e.clientX - X;
        YMove = e.clientY - Y;
        if(!o.isBeyond) {
            XMove = XMove >= 0 ? XMove : 0;
            XMove = DW >= XMove ? XMove : DW;
            YMove = YMove >= 0 ? YMove : 0;
            YMove = DH >= YMove ? YMove : DH;
        }
        d.css({
            "left" : XMove,
            "top" : YMove,
            "margin-top" : 0,
            "margin-left" : 0
        });
        return false;
    });

    // 松开鼠标,拖拽结束
    o.child.mouseup(function (e) {
        isMove = false;
    });
}
使用:$(function(){$("div").drag();});
  评论这张
 
阅读(22)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017