Home >Web Front-end >JS Tutorial >js drags div. When the mouse moves, the entire div also moves accordingly_javascript skills

js drags div. When the mouse moves, the entire div also moves accordingly_javascript skills

WBOYOriginal: 2016-05-16 17:13:321232browse

The HTML code is as follows, where the div to be dragged is the outermost div

Copy code The code is as follows:

New User Group

Group name

< ;img src='/images/ok.png' alt='ok' class='user_img' title='ok' style="display: none;" id="email_ok"/>

users

Description

OK　
Cancel

The js code is as follows,

Copy code The code is as follows:

 
$("#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; 
}); 
}); 

This code binds mouse listening events to the head of the displayed dialog box. When the mouse moves, the entire div also moves accordingly!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Discuss whether javascript is an object-oriented language_javascript skillsNext article：Discuss whether javascript is an object-oriented language_javascript skills

See more

js drags div. When the mouse moves, the entire div also moves accordingly_javascript skills

Related articles