Recording and sharing is also an important part of learning. The quality of articles on the gold digging platform is very good. I like browsing here.
A event the basic knowledge of the learning process, let me to HTML + CSS + javascript has a deep impression, especially the js, as the implementer of web behavior, in order to be able to face all kinds of development scenarios, must be in-depth study, after a period of theoretical study, and didn’t get a strong knowledge of feedback, so I decided to continue to explore in practice, And to record and share, to deepen understanding!
Demand disassembly analysis
It can be found that, after listing out, it becomes easier to implement through the code. The main implementation of this requirement depends on the mouse event, so it is necessary to understand the attributes of the mouse event. Next, in the code, I will use and explain these attributes and events.
HTML
<div class="popup">
<div class="popup-header">Click on the mobile</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div>
<div class="popup">
<div class="popup-header noselect">Click on the mobile</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div>
Copy the codeCSS
<style>
/* Box style - limits the zoom size */
.popup {
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
text-align: center;
min-height: 150px;
min-width: 300px;
max-height: 300px;
max-width: 600px;
}
/* Absolute position */
.popup {
position: absolute;
/*resize: both; ! *enable this to css resize*! * /
overflow: auto;
}
/* Drag the header element */
.popup-header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196f3;
color: #fff;
}
/* Scale the element style */
.popup .resizer-right {
width: 5px;
height: 100%;
background: transparent;
position: absolute;
right: 0;
bottom: 0;
cursor: e-resize;
}
.popup .resizer-bottom {
width: 100%;
height: 5px;
background: transparent;
position: absolute;
right: 0;
bottom: 0;
cursor: n-resize;
}
.popup .resizer-both {
width: 5px;
height: 5px;
background: transparent;
z-index: 10;
position: absolute;
right: 0;
bottom: 0;
cursor: nw-resize;
}
/* Unselect */
.popup * {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
}
</style>
Copy the codejs
<script>
window.onload = function() {
// Initialize drag and zoom functions for page loading
initDragElement();
initResizeElement();
};
function initDragElement() {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
var popups = document.getElementsByClassName("popup");
var dist = document.getElementById("elementDist");
var elmnt = null;
var currentZIndex = 100; // The default hierarchy of boxes
for (var i = 0; i < popups.length; i++) {
var popup = popups[i];
var header = getHeader(popup);
popup.onmousedown = function() {
/* When clicked, the box level is raised */
this.style.zIndex = "" + ++currentZIndex;
};
if (header) {
// Add a parent element dom to the header element
header.parentPopup = popup;
// Add a mouse-down eventheader.onmousedown = dragMouseDown; }}function dragMouseDown(e) {
// Mouse down to get the parent element DOM object
elmnt = this.parentPopup;
elmnt.style.zIndex = "" + ++currentZIndex;
e = e || window.event;
// Records the X and Y distances between the mouse and the browser valid area when the mouse is pressed down for the first time
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
if(! elmnt) {return;
}
e = e || window.event;
// Compute the new mouse position
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// Sets the new position of the element, the offset position of the element relative to its parent - mouse event click position = top of the element
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
function closeDragElement() {
console.log('The mouse is off.');
// Release the mouse to clear the mouse event
document.onmouseup = null;
document.onmousemove = null;
}
function getHeader(element) {
var headerItems = element.getElementsByClassName("popup-header");
if (headerItems.length === 1) {
return headerItems[0];
}
return null; }}function initResizeElement() {
// Get the popups element
var popups = document.getElementsByClassName("popup");
// Initialize the object
var element = null;
// Start position of the element
var startX, startY, startWidth, startHeight;
// Loop elements
for (var i = 0; i < popups.length; i++) {
var p = popups[i];
// Create a DOM node
var right = document.createElement("div");
// Add element styles
right.className = "resizer-right";
// Append dom nodes
p.appendChild(right);
// The element listens for mouse press events
right.addEventListener("mousedown", initDrag, false);
// Add the parent node attributes
right.parentPopup = p;
// Scale the element
var bottom = document.createElement("div");
bottom.className = "resizer-bottom";
p.appendChild(bottom);
bottom.addEventListener("mousedown", initDrag, false);
bottom.parentPopup = p;
// Bevel scaling elements
var both = document.createElement("div");
both.className = "resizer-both";
p.appendChild(both);
both.addEventListener("mousedown", initDrag, false);
both.parentPopup = p;
}
function initDrag(e) {
// Get the parent element attribute
element = this.parentPopup;
// Position the mouse element inside the screen
startX = e.clientX;
startY = e.clientY;
// getComputedStyle() reads the final style of the element, read-only -- attributes
// element.style Gets the inline style of the element, which supports reading and writing
startWidth = parseInt(
document.defaultView.getComputedStyle(element).width,
10
);
startHeight = parseInt(
document.defaultView.getComputedStyle(element).height,
10
);
// Listen for movement events and change the size
document.documentElement.addEventListener("mousemove", doDrag, false);
// Listen for mouse release events to remove mouse events
document.documentElement.addEventListener("mouseup", stopDrag, false);
}
function doDrag(e) {
// Change box width height Current box width + mouse event position - initial mouse event position
element.style.width = startWidth + e.clientX - startX + "px";
element.style.height = startHeight + e.clientY - startY + "px";
}
function stopDrag() {
// Remove the event
document.documentElement.removeEventListener("mousemove", doDrag, false);
document.documentElement.removeEventListener("mouseup", stopDrag, false);
}
}
</script>
Copy the codeI made a lot of comments on the above code. After reading it, I found that as long as you understand the meaning of the attribute and make use of its role, it is easy to achieve the desired effect. Next, I will make some explanations and notes on the knowledge points that I think are worth analyzing in this study to consolidate my study.
GetComputedStyle reads the style
This attribute is read-only. In most scenarios, we use element.style for styling elements, but use getComputedStyle for styling. Let’s first look at how it differs from the element.style property
-
Style reads only the inline style of the element, that is, the style written on the element’s style property; GetComputedStyle reads the final style, including inline, embedded, and external styles.
-
Element. style supports both reading and writing, and we can rewrite elements with element.style. GetComputedStyle only supports reads, not writes. We can read styles using getComputedStyle and modify styles using element.style
CurrentStyle = element. CurrentStyle = element. GetComputedStyle = element. In addition to float support, IE 8 supports styleFloat.
Drag the principle
// Compute the new mouse position
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// Sets the new position of the element, the offset position of the element relative to its parent - mouse event click position = top of the element
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
Copy the codeAs you can see, drag sets the position of the element, so who decides the value of the position of the element? According to my comments, the first is elmnt.offsetTop.
- OffsetTop: The distance between the element and the top offsetParent
- OffsetParent: a relative, absolute, fixed parent element closest to the element. If neither parent is qualified, offsetParent is the body.
- The original link: blog.csdn.net/jinxi1112/a…
After reading the explanation, this element is the distance from the body, but this distance is not the distance from the top of the element after moving, and the position of the mouse needs to be subtracted so that the position of the element follows the mouse effect.
conclusion
Every time I explore, I will gain something. As a self-strengthening program lover, I need persistent learning spirit, and the tenacious quality that I am not afraid of problems. Theory is the basis of practice, I hope to grow in every time I share with you. The above learning content comes from the network, share here, only as learning exchange use!