页面拖动功能jquery +js+html5 移动 弹出框 拖动 弹出框 拖动 div 拖动 弹出框

实现逻辑分析:

1.当鼠标触发按下事件

2.记录当前屏幕坐标

3.和要控制的div坐标向减的到二者之间关系

4.通过鼠标移动事件

5.激活div移动事件

6.div的新位置就鼠标位置和原始坐标的关系值

代码:
    function dragPanelDivMove(downDiv,moveDiv){
        $(downDiv).mousedown(function (e) {
                var isMove = true;
                var div_x = e.pageX - $(moveDiv).offset().left;
                var div_y = e.pageY - $(moveDiv).offset().top;
                $(document).mousemove(function (e) {
                    if (isMove) {
                        var obj = $(moveDiv);
                        obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y});
                    }
                }).mouseup(
                    function () {
                    isMove = false;
                });
        });

    }

dragPanelMove("#div1","#div2")

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值