首页 > 语言 > JavaScript > 正文

js拖动div 当鼠标移动时整个div也相应的移动

2024-05-06 15:55:52
字体:
来源:转载
供稿:网友
要拖动的div为最外层的div,这段代码对显示对话框的头部绑定鼠标监听事件,当鼠标移动时,整个div也相应的移动,具体的实现如下,感兴趣的朋友可以参考下

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

复制代码 代码如下:


<div>
<div>
<div>
<span>新建用户组</span>
<span title='关闭'/>
</span>
</div>
<!--新建联系人-->
<div>
<span>组名称</span>
<input type="text" value="">
<img src='/images/ok.png' value="">
</div>
<br>
<span> </span>
<br>
<span>描   述</span><br>
<textarea rows="5"></textarea>
<br>
<br>
<br>
<br>
<a href="javascript:void(0);">确 定</a>   
<a href="javascript:void(0);">取 消</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也相应的移动!
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选