How to realize the function of dragging window by vue

Today, the editor will share with you the relevant knowledge points about how to achieve drag-and-drop window function in vue. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Effect.

Implementation code

× export default {name: "moveBox", data () {return {show: true,// whether x: 100 true,// shows x: 100 leftOffset / mouse distance the left offset of the mobile window topOffset: 0 false / mouse distance offset at the top of the moving window isMove: false / / whether to move the identity} }, computed: {/ / top and left plus px position () {return `top:$ {this.y} px;left:$ {this.x} px; `;},}, methods: {/ / Control on / off toggleShow () {this.x = 100; this.y = 50; this.show =! this.show }, mousedown (event) {/ / mouse down event this.leftOffset = event.offsetX; this.topOffset = event.offsetY; this.isMove = true;}, / / mouse movement mousemove (event) {if (! this.isMove) {return;} this.x = event.clientX-this.leftOffset; this.y = event.clientY-this.topOffset }, / / Mouse lift mouseup () {this.isMove = false;},},}; .moveBox {width: 500px; height: 300px; position: fixed; box-shadow: 00 5px 3px # 95a5a6; .moveHead {height: 30px; background-color: # bdc3c7; cursor: move;} .close {position: absolute; right: 0; top: 0; line-height: 30px Font-size: 24px; cursor: pointer; display: block; width: 30px; height: 30px; text-align: center;}}. Vmurenter.VMurenter.v content {padding: 10px;} .v-enter-active,.v-leave-active {transition: all 0.5s ease;}

Use

Toggle moveBox Hello World

The code is not difficult, mainly using positioning to define top and left values in mouse movement events.

These are all the contents of the article "how to drag and drop windows in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.