jquery实现对话框拖动

之前项目组长让我实现一个固定的对话框可以拖动的效果,根据网上查到的代码自己写了一个对话框拖动方法,今天给大家分享一下我的代码。 

function moveDialog(moveHeadId, dialogId) {
   var dialog = $("#" + dialogId);
    var moveHead = $("#" + moveHeadId);
    moveHead.bind("mousedown",function (event) {
        var offset_x = dialog[0].offsetLeft;
        var offset_y = dialog[0].offsetTop;
        var mouse_x = event.pageX;
        var mouse_y = event.pageY;
        $(document).bind("mousemove", function (event) {
            var _x = event.pageX - mouse_x;
            var _y = event.pageY - mouse_y;
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            var dialogWidth = $("#" + dialogId).width();
            var dialogHeight = $("#" + dialogId).height();
            var now_x = offset_x + _x;
            //不超过左边界
            now_x = (now_x < 0 ? 0 : now_x);
            //不超过右边界
            now_x = (now_x > windowWidth - dialogWidth ? windowWidth - dialogWidth : now_x) + "px";
            var now_y = offset_y + _y;
            //不超过上边界
            now_y = (now_y < 0 ? 0 : now_y);
            //不超过下边界
            now_y = (now_y > windowHeight - dialogHeight ? windowHeight - dialogHeight : now_y) + "px";
            dialog.css({
                top: now_y,
                left: now_x
            })
        })
    });
    $(document).bind("mouseup", function (event) {
        $(this).unbind("mousemove");
    })
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值