Simple case of VUE implementation is not exceeding visual area

Example of this article shared Vue to implement the specific code of the drag and drop X effect, for everyone, the specific content is as follows

Before you drag, you understand a few small common sense:

These two methods of acquiring the mouse coordinate are different from the object-based objects:

  • Pagex and Pagey get the left corner distance of the mouse pointer distance document (HTML), and does not scroll with the scroll bar Change;
  • Clientx and Clienty get the distance of the mouse pointer distance visible window (excluding the above address bar and sliding bar), will change as the scroll bar is rolled;

1.Clientx: is used to get the distance from the left side of the current window
2. Clienty: is used to get the distance from the current window (
3. OffsetWidth: Used to get the width of the current drag element itself
4.OffsetHeight: It is used to get the current drag element itself
5.Document.documentelement.clientHeight: Screen visual height
6. Document.documentelement.ClientWidth: Screen visual height

  VUE implements drag    * {Margin: 0; Padding: 0;} #app {position: relative; / * Location * / TOP: 10px; Left: 10px; width: 80px; height: 80px; Background: # 666; / * Set the background * /}  {PositionY}} {{PositionY}}    VAR VM = New Vue ({EL: "#app", Data: {PositionX: 0, PositionY : 0}, methods: {move (e) {let {= e.target; // Get the target element // calculate the location of the mouse relative to the element, E.ClientX is the location of the mouse, offsetleft is an element relative to Large Element Location Let X = E.ClientX - ODIV.Offsetleft; Let Y = E.Clienty - ODIV.OffSettop; Console.log (ODIV.Offsetleft, Odiv.OffSettop) Document.OnmouseMove = (E) => {/ / Get the position of the drag element LET = E.Clientx - x; let top = E.clienty - y; this.positionX = left; this.positiony = top; //console.log (Document.documenTelement.ClientHeight, ocivus .offsetHeight) // drag element into the current location if (left  = document.documentElement.clientWidth - odiv.offsetWidth) {//document.documentElement.clientWidth visual width of the screen left = document.documentElement. Clientwidth - CLIENTWIDTH -odiv.offsetWidth;} if (top  = document.documentElement.clientHeight - odiv.offsetHeight) {top // document.documentElement.clientHeight visual screen height = document.documentElement.clientHeight - odiv.offsetHeight} odiv.style .left = left + "px"; odiv.style.top = top + "px"} // In order to prevent Firefox browser dragged shadow problem Document.onmouseUp = (E) => {document.onmousemove = null; document. OnMouseUp = null}}}})   
The above is all the contents of this article, I hope that everyone's learning is helpful, I hope everyone will support Tumi cloud.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment