jquery实现对话框拖动

缺乏、安全感 2023-10-07 10:48 20阅读 0赞

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

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 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 拖动（Draggable）

允许使用鼠标移动元素。如需了解更多有关 draggable 交互的细节，请查看 API 文档 [可拖拽小部件（Draggable Widget）][Draggable Wi

末蓝、/ 2024年03月24日 16:05/ 0 赞/ 55 阅读

相关 jQuery UI sortable()实现拖动排序

jQuery UI sortable()实现拖动排序 sortable() <!DOCTYPE html> <html>

迈不过友情╰/ 2024年03月16日 12:06/ 0 赞/ 117 阅读

相关 jquery实现对话框拖动

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

缺乏、安全感/ 2023年10月07日 10:48/ 0 赞/ 21 阅读

相关 php 图片可以拖动,JQuery可拖动图像,保存位置

好吧,它变得尴尬,已经搜索并尝试了大约5个小时,我只是在圈子里跑… 场景很简单：它是用户配置文件的标题图像,可以将其拖动到一个位置,然后将图像的顶部位置保存到数据库中. 感

浅浅的花香味﹌/ 2023年01月13日 09:13/ 0 赞/ 119 阅读

相关 jQuery实现可拖动控制进度条

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8">

我就是我/ 2022年10月20日 13:51/ 0 赞/ 205 阅读

相关 jquery 信息提示框对话框 div层实现

效果图： ![SouthEast][] 原网页地址：[http://tutorialzine.com/2010/12/better-confirm-box-jquer

亦凉/ 2022年09月20日 08:46/ 0 赞/ 201 阅读

相关使用jQuery实现元素拖动的要点

jQuery UI可以很简单的实现元素的拖动，有时候，我们不能使用jQuery UI，或者不想因为拖动就引入一个UI库，就可以自己实现元素的拖动，下面笔者把自己使用jQuery

小咪咪/ 2022年08月09日 15:55/ 0 赞/ 263 阅读

相关 Jquery 实现div随意拖动

目的：使div可以拖动。注：单纯用jq也是可以做的，这里使用jquery UI插件使得代码更简单。需要用的到的插件下载：[https://jqueryui.com/

超、凢脫俗/ 2022年05月19日 06:28/ 0 赞/ 406 阅读

相关在VC++中实现无标题栏对话框的拖动

转载自：[https://blog.csdn.net/goodadult2012/article/details/6129330][https_blog.csdn.net_go

谁践踏了优雅/ 2022年05月19日 02:48/ 0 赞/ 221 阅读

相关基于jQuery-Mobile对话框实现的简单相册

博主在这里介绍两种方法, 一、第一种方法（与网上的大部分相似，较为麻烦） <!DOCTYPE html> <html> <head>

深藏阁楼爱情的钟/ 2022年03月08日 11:24/ 0 赞/ 158 阅读