This article shares the specific code of JS implementation modal box drag and drop for your reference. The specific content is as follows
To achieve this case effect, we first understand several attributes.,,;After mastering these quantities, you can operate...
Let's explain it separately:
: refers to returning a value with the offset to position the left of the parent element. Of course, if the parent element of the element that needs to be operated is not positioned, then it returns the distance from the leftmost page of the browser.
: refers to returning a value with the offset of the top of the positioning parent element. Of course, if the parent element of the element that needs to be operated is not positioned, then it returns the distance from the top page of the browser.
It refers to the value from the leftmost point of the browser.
It refers to the value of the mouse from the top of the browser.
tips:The value obtained by offsetLeft is of the number type, without the pixel value px, but the value obtained by the obtained value is px for comparison memory. Mental formula: If you want to get the offset or size value of an element, use offset. If you want to set a value for a certain element, use style. Remember to add +'px' to the set value;
So let's talk about it in detail,The difference between offset and style:
offset
- offset can obtain the style value in any style sheet, just a value, without px units
- The value obtained by the offset series has no units
- offsetWidth contains padding+border+width
- Properties such as offsetWidth are read-only attributes, and can only be obtained but not assigned values [key point]
- Therefore, we want to get the element size position, and using offset is more suitable
style
- style can only get the style values in the style sheet in the line, and it is with unit px at this time.
- What you get is a string with units
- Get values that do not contain padding and border
- It is a readable and writeable attribute, which can be obtained or assigned [key point]
- So, if we want to change the value of the element, we need to change it with style
After we have mastered the above, let’s happily implement the needs...
Case requirements:
1. Click on the pop-up layer, and a modal box will pop up, and a gray translucent occlusion layer will be displayed.
2. Click the Close button to close the modal box and close the gray translucent occlusion layer at the same time.
3. Put the mouse on the top row of the modal box, and you can hold down the mouse and drag the modal box to move it in the page.
4. Release the mouse and stop dragging the modal box to move.
Case analysis:
1. Click on the pop-up layer, and the modal box and occlusion layer will be displayed. display:block;
2. Click the close button, and the modal box and occlusion layer will be hidden display:none;
3. The principle of dragging and dropping in the page: press and move the mouse, then release the mouse
4. The trigger event is when the mouse is pressed mousedown, the mouse moves mousemove, the mouse releases mouseup
5. Drag and drop process: During the mouse movement, the latest value is obtained and assigned to the left and top values of the modal box, so that the modal box can follow the mouse.
6. The event source triggered by the mouse press is the top line, that is, the id is title
7. Subtract the coordinates of the mouse The coordinates of the mouse in the box are the real position of the modal box.
8. Press the mouse and we want to get the coordinates of the mouse in the box.
9. When moving the mouse, set the coordinates of the modal box to: Mouse coordinates and subtract the box coordinates. Note that the movement event is written into the press event.
10. If the mouse is released, stop dragging, which can remove the mouse movement event.
Code:
Structure code:
<body>
<div class="login-header"><a href="javascript:;">Click，The login box pops up</a></div>
<div class="login">
<div class="login-title">Log in to a member
<span><a href="javascript:void(0);" class="close-login">closure</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>username：</label>
<input type="text" placeholder="Please enter a username" name="info[username]" class="list-input">
</div>
<div class="login-input">
<label>Login password：</label>
<input type="password" placeholder="Please enter your login password" name="info[password]" class="list-input">
</div>
</div>
<div class="login-button"><a href="javascript:void(0);" >Log in to a member</a></div>
</div>
<!-- Cover layer -->
<div class="login-bg"></div>
<script>
</script>
</body>Style code:
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.login {
display: none;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input -input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>js code:
= function() {
// 1. Get elements var login = ('.login');
var mask = ('.login-bg');
var link = ('#link');
var closeBtn = ('#closeBtn');
var title = ('#title');
// 2. Click the link of the pop-up layer link to let mask and login display ('click', function() {
= 'block';
= 'block';
})
// 3. Click closeBtn to hide mask and login ('click', function() {
= 'none';
= 'none';
});
// 4. Add a mouse button event to the title ('mousedown', function(e) {
// Get the distance of the mouse in the box var x = - ;
var y = - ;
// 5Create a moving function function move(e) {
= - x + 'px';
= - y + 'px';
}
// Mouse moves triggers an event ('mousemove', move);
// Mouse Removal Event ('mouseup', function() {
('mousemove', move);
});
});
}tips:js code is a separate file. Remember to introduce the file after inserting.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.