Shulou(Shulou.com)06/03 Report--

This article mainly introduces Javascript how to achieve the login box drag effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The details are as follows

Demand analysis

1. Click the pop-up login box

2. You can drag the login box to any location in a specific area of the login box.

3. You can close the login box and click the pop-up login box next time to return to the location.

Concrete realization

Complete code

Document * {padding: 0; margin: 0;} a {text-decoration: none; color: black;}. Login-header {/ * margin: 0 auto; * / / * width must be set for it to work * / height: 30px Line-height: 30px; font-size: 24px; text-align: center;} .login {width: 500px; height: 300px; position: absolute; border: # 725252 solid 1px; / * transform: translate (- 50% left 50%); * / left: 50% Top: 50%; / * there can be no margin here, because we only changed the left and right, and the margin will take effect again after the move, resulting in failure * / / * margin-left:-250px; margin-top: 50px; * / background-color: seashell; transform: translate (- 50%,-50%) Z-index: 9999; box-shadow: 0 30px black; display: none;}. Login-title {position: relative; margin: 20px 000; height: 40px; line-height: 40px; text-align: center; font-size: 20px Cursor: move;} .close-btn {position: absolute; width: 30px; height: 30px; right:-15px; top:-35px; border-radius: 50%; background-color: # ffffff; line-height: 30px }. Login-content {margin: 15px auto; width: 450px; height: 230px;} .login-input label {margin-top: 20px; margin-left: 30px; width: 100px; text-align: right; height: 30px; line-height: 30px Display: inline-block;}. Login-input input {height: 30px; width: 230px; border-radius: 10px; border: 1px solid rgba (0,0,0, .5);} .login-btn {width: 100px; height: 50px; margin: 30px auto Border: 1px solid black; border-radius: 7px; line-height: 50px; text-align: center } login pop-up login box login x account: login password: Log in to let out = document.querySelector ('.login-header') Let login_box = document.querySelector ('.login'); let title = document.querySelector ('.login); let close = document.querySelector (' .close-btn'); let move = document.querySelector ('.login-content'); out.addEventListener (' click',function () {login_box.style.display = 'block';}) Close.addEventListener ('click',function () {login_box.style.left = 50 +'%'; login_box.style.top = 50 +'%'; login_box.style.display = 'none';}) / * only title can move * / title.addEventListener ('mousedown',function (e) {/ * calculate the distance of the mouse in the title as soon as the mouse is pressed, and remain the same until the next mouse press * / / * login_box 's offset must be used here, because there is already an absolute positioning login_box before the title Its offset is 0 * / let mousex = e.pageX-login_box.offsetLeft. Let mousey = e.pageY-login_box.offsetTop; console.log (mousex,mousey) / * Why doucument is used instead of title here is because the mouse may move too fast beyond the scope of the title, and to prevent the title box from being obscured. The move and cancellation of business leave cannot be triggered before the mouse is not over the title, so it cannot be invalidated * / function movee (e) {login_box.style.left = e.pageX-mousex + 'px' Login_box.style.top = e.pageY-mousey + 'px';} document.addEventListener (' mousemove',movee) document.addEventListener ('mouseup',function () {document.removeEventListener (' mousemove',movee)})})

The implementation of clicking the pop-up login box

Use the click event of JavaScript to set the display setting of the login box without block when clicking and popup.

Out.addEventListener ('click',function () {login_box.style.display =' block';})

The realization of drag and drop effect

The implementation of drag and drop effect is divided into three steps:

Press the mouse to get the coordinates of the mouse in the landing box

Move the mouse to get the location of the landing box

Release the mouse to release the event of mouse movement

1. Press the mouse to get the coordinates of the mouse in the landing box

How do I get the position of the mouse in the landing box? Here we use the mouse coordinates on the page to subtract the left margin on the login box.

As can be seen from the picture above, the coordinates of the mouse in the landing frame are not: (XMagi y) = (pageX − offsetLeft,PageY − offsetTop) (XMague y) = (pageX-offsetLeft,PageY-offsetTop) (xMague y) = (pageX − offsetLeft,PageY − offsetTop)

When let here is not taking into account the impact of the border on offset.

/ * calculate the distance of the mouse in the title as soon as the mouse is pressed, and keep it the same until the next mouse press * / * login_box 's offset must be used here, because there is an absolute positioning login_box before title, and its offset is 0 * / let mousex = e.pageX-login_box.offsetLeft;let mousey = e.pageY-login_box.offsetTop.

two。 Move the mouse to get the location of the login box

At this time, the position of the mouse in the login box will not change until the mouse is released, and we can use this feature to get the location of the current login box. That is the coordinates of the mouse on the page minus the coordinates of the mouse on the page. There is no more explanation here.

/ * Why doucument is used instead of title here is because the mouse may move too fast beyond the scope of the title, and to prevent the title box from being obscured. The move and cancellation of business leave cannot be triggered before the mouse is not over the title, so it cannot be invalidated * / function movee (e) {login_box.style.left = e.pageX-mousex + 'px' Login_box.style.top = e.pageY-mousey + 'px';} document.addEventListener (' mousemove',movee)

3. Release the mouse to release the event of mouse movement

Document.addEventListener ('mouseup',function () {document.removeEventListener (' mousemove',movee)})

Close the login box and return to position

Just set its display to none, depending on the code.

Close.addEventListener ('click',function () {login_box.style.left = 50 +'%'; login_box.style.top = 50 +'%'; login_box.style.display = 'none';}); effect display

Difficulties encountered in code implementation

1. When you use margin in the middle, you must have width. I haven't written code for a long time. I have forgotten it.

2. Because setting margin to the login box leads to mobile dislocation, this is because my coordinate calculation formula does not take into account margin (only taking into account the positioning of left and right), resulting in the login box reaching the coordinate position and because magin has adjusted the position. The solution should be to subtract margin when calculating the moving coordinates.

3. Offset is relative to the parent node with location, so keep in mind.

4. Why is it an event bound to document when the mouse is moved?

The event is bound to the document in order to place the mouse moving too fast and cannot be handled correctly. If the login box is not absolutely positioned, it may be obscured by other elements during the move, so the mobile event cannot be bound to the login box, but to the document.

Thank you for reading this article carefully. I hope the article "Javascript how to achieve the effect of dragging the login box" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.