<>1. Drag and drop
page ：
<div @mousedown="move" style="position: relative; "> To be dragged div </div>
Implementation method ：
move(e){ let odiv = e.currentTarget ; // Get target element // Calculate the position of the mouse relative to the element let disX =
e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{ // Mouse down and move event // Subtract the position of the mouse relative to the element from the position of the mouse , Get the position of the element let left
= e.clientX - disX; let top = e.clientY - disY; // Change element position attribute value , Move current element
odiv.style.left = left + 'px'; odiv.style.top = top + 'px'; };
document.onmouseup = (e) => { // The mouse will not move after it is released document.onmousemove = null;
document.onmouseup = null; }; }
<>2.$event event
* e.target It's the element you're currently clicking on
* e.currentTarget Is the element that you bind to the event
* Gets the previous element of the click element
e.currentTarget.previousElementSibling.innerHTML
* Gets the first child of the click element
e.currentTarget.firstElementChild
* Get the next element of the click element
e.currentTarget.nextElementSibling
* Get the click element id by string The elements of
e.currentTarget.getElementById(“string”)
* Get the string attribute
e.currentTarget.getAttributeNode(‘string’)
* Gets the parent element of the click element
e.currentTarget.parentElement
* Gets the value of the first child element of the previous element of the click element HTML value
e.currentTarget.previousElementSibling.firstElementChild.innerHTML
<>3.clientY,pageY,screenY,layerY,offsetY The difference between
clientY Refers to the distance from the top left corner of the visual page pageY Refers to the distance from the top left corner of the visual page ( Not affected by page scrolling ) screenY Refers to the distance from the top left corner of the screen
layerY It refers to the distance in the upper left corner of the nearest location found in it or its parent element offsetY It's the distance from the top left corner of itself
Technology