js拖动div

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

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

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


<div id="dialog_createUserGroup" class="dialog_main" style="">

    <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;">&nbsp;</span>
        <br/>
        <span class="localinfo" style="padding:10px 10px 0 46px;margin-top:20px">用&nbsp;&nbsp;&nbsp;户</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;">&nbsp;</span>
        <br>
        <span class="localinfo" style="padding:10px 10px 0 46px;">描&nbsp;&nbsp;&nbsp;述</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;
        });
    });


这段代码对显示对话框的头部绑定鼠标监听事件,当鼠标移动时,整个div也相应的移动!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值