Js drag div when the mouse moves, the entire div also moves accordingly

The HTML code is as follows. The div to be dragged is the div of the outermost layer.
Copy codeThe Code is as follows:
<Div id = "dialog_createUserGroup" class = "dialog_main" style = "">
<Div id = "McreateUserGroup">
<Div class = "title">
<Span class = "poptitle"> create a user group </span>
<Span class = "dialog_close" title = "close" onClick = "closeUserGroup ();">

</Span>
</Div>
<! -- Create a contact -->
<Div class = "popContent">
<Span class = "localinfo" style = "padding: 10px 10px 0 46px;"> group name </span>
<Input type = "text" id = "userGroupName" name = "userGroupName" class = "input_info" value = "" style = "width: 265px;">

<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"> User </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;"> description </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; "> confirm </a>
<A href = "javascript: void (0);" class = "dialog_btn2" onclick = "closeUserGroup ();"> remove </a>
</Div>

The js Code is as follows,
Copy codeThe Code is as follows:
$ ("# McreateUserGroup"). mousedown (function (e ){
Var flag = true;
E = e | event;
Var $ dialog_createUserGroup = $ ("# dialog_createUserGroup ");
Var LEFT = e. clientX-parseint(includialog_createusergroup.css ("left ")),
TOP = e. clientY-parseint(includialog_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 the mouse listening event to the header of the displayed dialog box. When the mouse moves, the entire div moves accordingly!