This example will share with you the specific implementation code of JavaScript pop-up drag window for your reference. The specific content is as follows
Requirement description:
1. Click the page button to pop up the window;
2. Have a translucent background mask;
3. The pop-up window has rounded corners, the window is translucent, but the content is opaque; with shadow;
4. The window can be dragged;
5. After the drag stops, the window position remains unchanged when scrolling the page;
6. You can use jQuery;
7. There is a close button;
Further functional description :
Click the button and there will be a floating layer that can be dragged out.
There is a background mask that supports dragging and dropping of the title bar. Dragging outside the title bar area has no effect. The drag function is limited, and its drag function is limited to the visible area.
Drag ideas:
Get the position of the mouse. When the mouse moves, get the position of the mouse, get the x-axis y-axis, assign it to the window's x-axis y-axis, and make the window absolutely positioned. Cancel this event when the mouse is released.
The implementation principle of drag and drop:
When the mouse is moving, the coordinate position of the floating layer is constantly updated when the mouse is moving.
1. When the mouse presses the floating element, mark the floating element as it can be dragged.
2. When the mouse is moving, we first check whether the fluctuations of the floating element mark can be dragged. If so, let the floating layer move with the mouse, and ignore it if not.
3. When the mouse is released, the floating element cannot be dragged.
4.js drag and drop mainly uses three mouse events: mousedown, mousemove, and mouseup.
mousedown: press the mouse
mouseup: release the mouse
mousemove: Mouse move
Note : The difference between mousedown and click: The entire process of mousedown clicking will occur with three events: mousedown→mouseup→click, and click will not occur after the mouse is released at the end.
Speaking of this, we have to talk about the mouse event.
Let’s briefly talk about the mouse event below:
(1) click event
(2) dbclick event
(3) mousedown event
(4) mouseup event
(5)mouseenter event
(6)mouseover event
(7) mouseleaver event
(8)mouseout event
Explanation : (The explanation of the mouse event is selected from w3school)
(1) Click event: The click event is triggered when the user taps the left mouse button on the element and releases the left button on the same element.
(2) dbclick event: When the element is double-clicked, the dblclick event will occur. A click occurs when the mouse pointer stays above the element and then presses and releases the left mouse button. Two clicks occur in a very short time, which is a double click event.
Example:
When double-clicking the button, hide or display the element:
$(document).ready(function(){ $("button").dblclick(function(){ $("p").slideToggle(); }); });(3) mousedown event: When the mouse pointer moves above the element and presses the mouse button, the mousedown event will occur. Unlike the click event, the mousedown event only requires the key to be pressed and does not need to be released to occur.
$(document).ready(function(){ $("button").mousedown(function(){ $("p").slideToggle(); });});(4) mouseup event: When the mouse button is relaxed on the element, the mouseup event will occur.
Unlike the click event, the mouseup event only requires a relax button. When the mouse pointer is above the element, the relax mouse button triggers the event.
$(document).ready(function(){ $("button").mouseup(function(){ $("p").slideToggle(); });});(5) mouseenter event: When the mouse pointer passes through an element, the mouseenter event will occur. This event is used most of the time with the mouseleave event.
Note: Unlike the mouseover event, the mouseenter event will only be triggered when the mouse pointer passes through the selected element. If the mouse pointer passes through any child elements, the mouseover event will also be triggered.
(6) mouseover event: When the mouse pointer is above the element, the mouseover event will occur. This event is used most of the time with the mouseout event.
Note: Unlike the mouseenter event, the mouseover event will be triggered regardless of whether the mouse pointer passes through the selected element or its child element. The mouseenter event will only be triggered when the mouse pointer passes through the selected element.
$(document).ready(function(){ $("p").mouseover(function(){ $("p").css("background-color","yellow"); }); $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });The difference between mouseenter and mouseover
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript"> x=0; y=0; $(document).ready(function(){ $("div.over").mouseover(function(){ $(".over span").text(x+=1); }); $("div.enter").mouseenter(function(){ $(".enter span").text(y+=1); }); }); </script></head><body> <p>The mouseover event will be triggered regardless of whether the mouse pointer passes through the selected element or its child element. </p> <p>The mouseenter event will only be triggered when the mouse pointer passes through the selected element. </p> <div style="background-color:lightgray;padding:20px;width:40%;float:left"> <h2 style="background-color:white;">Flashed Mouseover event: <span></span></h2> </div> <div style="background-color:lightgray;padding:20px;width:40%;float:right"> <h2 style="background-color:white;">Flashed Mouseenter event: <span></span></h2> </div></body></html>(7) mouseleaver event: When the mouse pointer passes through an element, the mouseenter event will occur.
This event is used most of the time with the mouseleave event.
Note: Unlike the mouseout event, the mouseleave event will only be triggered when the mouse pointer leaves the selected element. If the mouse pointer leaves any child elements, the mouseout event will also be triggered.
(8)mouseout event
The mouseout event occurs when the mouse pointer is moved away from the element.
This event is used most of the time with the mouseover event.
Note: Unlike the mouseleave event, the mouseout event will be triggered regardless of whether the mouse pointer leaves the selected element or any child element. The mouseleave event will only be triggered when the mouse pointer leaves the selected element.
Please see the following example demonstration.
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript"> x=0; y=0; $(document).ready(function(){ $("div.out").mouseout(function(){ $(".out span").text(x+=1); }); $("div.leave").mouseleave(function(){ $(".leave span").text(y+=1); }); }); </script></head><body> <p>The mouseout event will be triggered regardless of whether the mouse pointer leaves the selected element or any child element. </p> <p>The mouseleave event will only be triggered when the mouse pointer leaves the selected element. </p> <div style="background-color:lightgray;padding:20px;width:40%;float:left"> <h2 style="background-color:white;">Flashed Mouseout event: <span></span></h2> </div> <div style="background-color:lightgray;padding:20px;width:40%;float:right"> <h2 style="background-color:white;">Flashed Mouseleave event: <span></span></h2> </div></body></html>Note: This article is original, address: http://www.cnblogs.com/wanghuih/p/5569438.html
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.