Detailed explanation of the drag effect example code of js implementation pop-up box

//HTML part<div class="wrap"></div>
<div class="popUpBox">
<div class="layer-head"><div class="layer-head-text">Popup box</div><div class="layer-close"></div></div>
<div class="layer-body"></div>
<div class="layer-footer">
<div class="layer-footer-button-group">
<div class="layer-footer-button layer-sure">Sure</div>
<div class="layer-footer-button layer-cancel">Cancel</div>
</div>
</div>
</div>
//CSS part.wrap {
position: fixed;
left: 0;
top: 0;
background-color: #000;
z-index: 10000;
  opacity: 0.3;
}
.popUpBox {
height: 400px;
width: 700px;
position: absolute;
overflow: hidden;
box-sizing: border-box;
z-index: 10000;
background-color: #fff;
border-radius: 2px;
box-shadow: 1px 1px 50px rgba(0,0,0,.3);
}
.layer-head {
width: 100%;
height: 35px;
border-bottom: 1px solid #eee;
box-sizing: border-box;
background-color: #f8f8f8;
border-radius: 4px 4px 0 0;
cursor: move;
}
.layer-head-text {
padding-left: 20px;
font-size: 14px;
color: #333;
height: 35px;
line-height: 34px;
float: left;
}
.layer-close {
float: right;
width: 16px;
height: 16px;
background-image: url(../images/close_hover.png);
background-repeat:no-repeat;
background-size:100% 100%;
position: absolute;
top: 10px;
right: 12px;
cursor: pointer;
}
.layer-body {
width: 100%;
height: calc(100% - 73px);
}
.layer-footer {
width: 100%;
height: 38px;
border-top: 1px solid #eee;
box-sizing: border-box;
background-color: #f8f8f8;
border-radius: 0 0 4px 4px;
}
.layer-footer-button-group {
padding: 5px 0 5px 576px;
height: 28px;
}
.layer-footer-button {
width: 56px;
height: 28px;
line-height: 28px;
margin-right: 6px;
box-sizing: border-box;
font-size: 12px;
float: left;
text-align: center;
cursor: pointer;
}
.layer-sure {
border: 1px solid #4898d5;
background-color: #2e8ded;
color: #fff;
}
.layer-cancel {
border: 1px solid #dedede;
background-color: #f1f1f1;
color: #333;
}
// When clicking on an object, just use the drag object. Move and up are the global areas, that is, the entire document is common. You should use a document object instead of a drag object (otherwise, when using a drag object, the object can only move to the right or below)$(document).on('mousedown', '.layer-head', function(e) {
e = e || ; //Compatible with IE browservar drag = $(this).parent();
$('body').addClass('select'); //Webkit kernel and Firefox prohibit text to be selected =  = function() { //IBR prohibits text selectionreturn false;
}
if ($().hasClass('layer-close')) { //Click the close button and cannot drag the modal boxreturn;
}
var diffX =  - ().left; //The distance relative to the left border of the object when the mouse clicks on the object = the distance from the leftmost distance when clicking on the browser - the distance from the leftmost border of the object relative to the leftmost border of the browservar diffY =  - ().top;
$(document).on('mousemove', function(e) {
e = e || ; //Compatible with IE browservar left =  - diffX; 
var top =  - diffY;
if (left < 0) { 
left = 0; 
} else if (left >  - ()) { 
left =  - (); 
}
if (top < 0) { 
top = 0; 
} else if (top >  - ()){ 
top =  - (); 
}
//Regain the distance of the object when moving, solve the problem of shaking when dragging({
'left': left + 'px',
'top': top + 'px'
});
});
$(document).on('mouseup', function(e) { //Not moving when the mouse is bounced$(document).unbind("mousemove");
$(document).unbind("mouseup");
});
});