Vue 实现可拖拽、拖拽组件

描述：

组件仅封装拖拽功能，内容通过#header、#default、#footer插槽自定义

<template><divref="wrapper"class="drag-bar-wrapper"><divref="header"class="drag-bar-header"><!-- 头部区域 --><slot name="header" /></div><div class="drag-bar-content"><!-- 主内容区域 --><slot name="default" /></div><div class="drag-bar-footer"><!-- 底部区域 --><slot name="footer" /></div></div>
</template><script>
export default {data() {return {wrapperDom: null,headerDom: null,disX: 0,disY: 0,minLeft: 0,maxLeft: 0,minTop: 0,maxTop: 0,prevLeft: 0,prevTop: 0,};},methods: {initDrag() {this.wrapperDom = this.$refs.wrapper;this.headerDom = this.$refs.header;this.headerDom.addEventListener('mousedown', this.onMousedown, false);//点击头部区域拖拽},onMousedown(e) {this.disX = e.clientX - this.headerDom.offsetLeft;this.disY = e.clientY - this.headerDom.offsetTop;this.minLeft = this.wrapperDom.offsetLeft;this.minTop = this.wrapperDom.offsetTop;this.maxLeft =window.innerWidth - this.minLeft - this.wrapperDom.offsetWidth;this.maxTop =window.innerHeight - this.minTop - this.wrapperDom.offsetHeight;const { left, top } = getComputedStyle(this.wrapperDom, false);this.prevLeft = parseFloat(left);this.prevTop = parseFloat(top);document.addEventListener('mousemove', this.onMousemove, false);document.addEventListener('mouseup', this.onMouseup, false);document.body.style.userSelect = 'none'; //消除拖拽中选中文本干扰},onMousemove(e) {let left = e.clientX - this.disX;let top = e.clientY - this.disY;if (-left > this.minLeft) {left = -this.minLeft;} else if (left > this.maxLeft) {left = this.maxLeft;}if (-top > this.minTop) {top = -this.minTop;} else if (top > this.maxTop) {top = this.maxTop;}this.wrapperDom.style.left = this.prevLeft + left + 'px';this.wrapperDom.style.top = this.prevTop + top + 'px';},onMouseup() {document.removeEventListener('mousemove', this.onMousemove, false);document.removeEventListener('mouseup', this.onMouseup, false);document.body.style.userSelect = 'auto'; //恢复文本可选中},},mounted() {this.initDrag();}
};
</script><style scoped>
.drag-bar-wrapper {position: fixed;z-index: 2;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;flex-direction: column;
}
.drag-bar-header {background-color: #eee;cursor: move; /*拖拽鼠标样式*/
}
.drag-bar-content {background-color: #fff;
}
.drag-bar-footer {background-color: #fff;
}
</style>

Vue 实现可拖拽、拖拽组件相关推荐

Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸
Vue自定义指令实现弹窗拖拽,四边拉伸及对角线拉伸引言页面布局 drag.js文件弹窗拖拽实现及边界限制鼠标指针悬停样式四边拉伸及对角线拉伸拉伸干涉引言近期公司vue前端项目需求:实现 ...
vue项目中draggable实现拖拽排序
本文简要介绍在Vue项目中利用draggable实现拖拽排序的功能,先简单展示下具体功能. 如上图所示,点击[排序]之前list中每个item不能进行排序,当选中[排序]后可以拖拽的方式进行排序.下面 ...
dropzone拖拽上传组件使用全记录
原文链接: dropzone拖拽上传组件使用全记录公司有一个需求是把附件上传优化成可以通过拖拽本地文件来上传的效果,找了一圈都没有找到特别简单好用的组件,最后还是决定使用github上1.6万sta ...
vue-draggable-resizable-gorkys 可拖拽缩放的组件
说明:组件基于vue-draggable-resizable进行二次开发. 文章引用于vue-draggable-resizable 可拖拽缩放的组件 - SegmentFault 思否 git引用于 ...
Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题）
Vue 实现弹框自由拖拽(不出可视范围.解决快速拖动问题) 由于页面中弹框很多,往往会挡住想要查看的内容.从而,有了自由移动拖拽弹框的需求:但在使用的过程中发现,一开始编写的drag.js文件会移出可 ...
vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动
原文地址:vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动_超人不会飞啊的博客-CSDN博客_vue鼠标拖拽这边如果是动态渲染的div,需要等dom渲染结束后.id存在了.再去设置this.sc ...
vue+flask实现视频合成(拖拽上传)
vue+flask实现视频合成效果如下欢迎访问博客代码哈士奇技术聊天交流群 974178910 前端交流群 535620886 vue+flask实现视频合成拖拽上传我们之前一个文章有写过 ...
双y轴设置颜色_项目实战：Qt多段Y轴折线图框架（双Y轴段折线、支持拽拖、浮动游标显示X值各段Y值、实时下位机数据）...
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/111660400长期持续带来更多项目与技术分享 ...
最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
本文完整版:<最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评> Vue 实时消息提示通知 Vue-notification - 专注实 ...
让GAN再次伟大！拽一拽关键点就能让狮子张嘴大象转身，汤晓鸥弟子的DragGAN爆火，网友：R.I.P. Photoshop...
丰色萧箫发自凹非寺量子位 | 公众号 QbitAI 这两天,一段AI修图视频在国内外社交媒体上传疯了. 不仅直接蹿升B站关键词联想搜索第一,视频播放上百万,微博推特也是火得一塌糊涂,转发者纷纷 ...

Vue 实现可拖拽、拖拽组件

Vue 实现可拖拽、拖拽组件相关推荐

最新文章

热门文章