js拖动div

最新推荐文章于 2025-06-20 08:41:11 发布

zhuxiangyu2012

最新推荐文章于 2025-06-20 08:41:11 发布

阅读量802

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js div drag

本文链接：https://blog.youkuaiyun.com/zhuxiangyu2012/article/details/16856729

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的可拖动对话框示例，通过监听鼠标事件来实现整个对话框的移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码如下，其中，要拖动的div为最外层的div

<div id="McreateUserGroup">
        <div class="title">
            <span class="poptitle">新建用户组</span>
            <span class="dialog_close" title="关闭" onClick="closeUserGroup();">
                <img src='/images/close.png' alt='close' class='user_img' title='关闭'/>
            </span>
        </div>

    
    <div class="popContent">
        <span class="localinfo" style="padding:10px 10px 0 46px;">组名称</span>
        <input type="text" id="userGroupName" name="userGroupName" class="input_info" value="" style="width:265px;">
        <img src='/images/ok.png' alt='ok' class='user_img' title='ok' style="display: none;" id="email_ok"/>
        <br>
        <span id="userGroupName_info" style="margin-left: 100px; color: red;"> </span>
        <br/>
        <span class="localinfo" style="padding:10px 10px 0 46px;margin-top:20px">用   户</span>
        <div style="padding-top: 20px;width:265px;display:inline-block">
        <input type="text" id="group_username" name="group_username" class="input_info" value="" style="width:280px;">
        </div>
        <br>
        <span id="name_info" style="margin-left: 100px; color: red;"> </span>
        <br>
        <span class="localinfo" style="padding:10px 10px 0 46px;">描   述</span><br>
        <textarea id="userGroup_displayname" class="textarea_comm" rows="5" name="userGroup_displayname" style="width:265px;margin-left: 100px;"></textarea>
        <br>
        <br>
        <br>
        <br>
        <a href="javascript:void(0);" id="save_contact_btn" class="dialog_btn2" onclick="saveUserGroup();" style="margin-right: 260px;">确　定</a>　　　
        <a href="javascript:void(0);" class="dialog_btn2" onclick="closeUserGroup();">取　消</a>

</div>

js代码如下,

      $("#McreateUserGroup").mousedown(function(e){
        var flag = true;
        e = e||event;
        var $dialog_createUserGroup = $("#dialog_createUserGroup");
        var LEFT = e.clientX - parseInt($dialog_createUserGroup.css("left")),
                TOP = e.clientY - parseInt($dialog_createUserGroup.css("top"));
        $(document).mousemove(function (e) {
            e = e || event;
            if (flag) {
                $dialog_createUserGroup.css({
                    "left": e.clientX - LEFT + "px",
                    "top": e.clientY - TOP + "px"
                });
            }
        });
        $(document).mouseup(function (e) {
            flag = false;
        });
    });