How to use vue+ts to realize the effect of element mouse drag
This article mainly explains "how to use vue+ts to achieve the element mouse drag effect", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's train of thought slowly in depth, together to study and learn "how to use vue+ts to achieve element mouse drag effect" bar!
Realize the effect
Related usage attribut
/ / the coordinates of the clientX mouse relative to the x-axis of the upper left corner of the browser; do not change with the scroll bar; / / the coordinates of the clientY mouse relative to the y axis of the upper left corner of the browser; do not change with the scroll bar; / / element.offsetTop refers to the position above the element distance or the upper control, integer, in pixels. / / element.offsetLeft refers to the position of the element from the left or upper control, integer, in pixels. / / element.offsetWidth refers to the width, integer, in pixels of the element control itself. / / element.offsetHeight refers to the height, integer, and unit pixels of the element control itself. / / clientHeigh = height + up and down padding// clientWidth = width+ around padding
Implement the complete code
Element drag button import {Component, Emit, Inject, Prop, Ref, Vue, Watch} from 'vue-property-decorator';@Component ({components: {},}) export default class BriberyInformation extends Vue {@ Ref () readonly moveBtn; @ Ref () readonly parentBox; btnDown () {let box = this.moveBtn.$el; / / get the box dom element let parentBox = this.parentBox of button / / get dom element of button parent element let parentH = parentBox.clientHeight; / / get height let parentW = parentBox.clientWidth; / / get width let x, y; let moveX, moveY; / / moving distance let maxX of button parent element, maxY; / / maximum moving distance let isDrop = false; box.onmousedown = e = > {x = e.clientX-box.offsetLeft / / the coordinates of the e.clientX mouse relative to the x-axis in the upper left corner of the browser-the position of the upper button control y = e.clientY-box.offsetTop; isDrop = true;}; _ document.onmousemove = e = > {if (isDrop) {e.preventDefault (); moveX = e.clientX-x; / / get the distance, the left moving distance, moveY = e.clientY-y / / get the moving distance above the distance / / the maximum movable distance maxX = parentW-box.offsetWidth; maxY = parentH-box.offsetHeight; / / calculate the effective distance of the movement / / console.log (Math.min (- 1,4,6,12)) / / output-1-multiple parameters that return the minimum value moveX = Math.min (maxX, Math.max (0, moveX)); moveY = Math.min (maxY, Math.max (0, moveY)); box.style.left = moveX + 'px'; box.style.top = moveY +' px';} else {return;}} _ document.onmouseup = e = > {e.preventDefault (); isDrop = false;};} mounted () {this.btnDown ();}} to-do-list {position: relative; min-height: 600px; max-height: 600px; width: 600px; overflow: hidden; border: 2px solid black;. Move-btn {position: absolute }} Thank you for your reading, the above is the content of "how to use vue+ts to achieve the element mouse drag effect". After the study of this article, I believe you have a deeper understanding of how to achieve the element mouse drag effect with vue+ts, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
