Heim >Web-Frontend >js-Tutorial >js拖动div 当鼠标移动时整个div也相应的移动_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 17:13:321227Durchsuche

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

复制代码 代码如下:




新建用户组

close




组名称

ok


 


用   户





 


描   述










确 定   
取 消


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也相应的移动!
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn