vue js实现拖拽
Posted 小猴子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue js实现拖拽相关的知识，希望对你有一定的参考价值。
<div class="add-input2" @mousedown.stop.prevent="dragImg" ref=‘dragImgDom‘> //样式一定要定位且有宽高
//内容
</div>
//拖拽
dragImg(e) {
this.$refs.dragImgDom.style.cursor = "move";
this.dragFlag = true;
this.mouseLeft = e.clientX - parseInt(this.$refs.dragImgDom.offsetLeft);
this.mouseTop = e.clientY - parseInt(this.$refs.dragImgDom.offsetTop);
document.onmousemove = e => {
if (this.dragFlag) {
this.$refs.dragImgDom.style.cursor = "move";
this.curX = e.clientX - this.mouseLeft;
this.curY = e.clientY - this.mouseTop;
this.$refs.dragImgDom.style.left = this.curX + "px";
this.$refs.dragImgDom.style.top = this.curY + "px";
}
};
document.onmouseup = () => {
this.dragFlag = false;
this.$refs.dragImgDom.style.cursor = "default";
};
},
以上是关于vue js实现拖拽的主要内容，如果未能解决你的问题，请参考以下文章