常春岛资源网 Design By www.syssdc.com
基于 vue
此功能核心思想就是通过 JavaScript 代码控制 node 在页面上的左边距与顶边距,不同的的样式定位方式有不同的解决方案
本方案采用position: absolute
定位方式的解决方案
css 样式的核心代码
// 父容器核心样式 width: 100%; height: 100%;
// 子容器核心样式 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
父容器通过width && height
字段占满整个浏览器的可视范围,子容器通过position: absolute
属性开启在父容器内的绝对定位,在通过top && left && transform: translate(-50%, -50%)
属性控制子容器在父容器内的绝对位置
JavaScript 逻辑控制的核心代码
首先分解下,要实现 node 的移动需要哪些步骤和对应的 event 事件
- 子容器创建时,在父容器内的绝对位置
- 鼠标按键按下时,onmousedown 事件
- 鼠标移动时,onmousemove 事件
- 鼠标按键弹起时,onmouseup 事件
只要使用 onMousedown、onMousemove和onMouseup 这三个事件,就可以实现最简单的移动
/* * 在子容器创建的时候获取子容器相对于父容器的 top 和 left 位置 */ mounted () { this.left = this.$refs.fatherBox.offsetLeft this.top = this.$refs.fatherBox.offsetTop }
/* * 鼠标按下时 * 1. 开启允许子容器移动的 flag * 2. 记录鼠标点击时的位置信息 */ mouseDown (e) { // 设置允许弹窗移动的 flag this.moveFlag = true // 保存鼠标开始位置 this.startLeft = e.clientX - this.left this.startTop = e.clientY - this.top }
/* * 鼠标移动时 * 1. 判断 flag 是否允许子容器移动 * 2. 设置弹框左边位置 * 3. 设置弹框右边位置 */ move (e) { // 判断 flag 是否允许移动 if (!this.moveFlag) return // 设置弹框左边位置 this.left = e.clientX - this.startLeft // 设置弹框右边位置 this.top = e.clientY - this.startTop }
/* * 鼠标按键弹起时 * 1. 关闭允许子容器移动的 flag */ mouseUp (e) { this.flag = false }
通过这几个方法就可以获取鼠标按下移动时,鼠标的top 和 left 的偏移量,通过把这偏移量暴露出去给父组件,父组件实时设置子组件的 top 和 left 值,来使得子容器跟随鼠标的移动
父组件部分代码
父组件通过设置子组件的 ref、zIndex 值,而且父组件的 backValue 方法会从子组件接收 zIndex 值,通过 zIndex 来识别具体的子组件实例
/* * 父组件代码片段 jsx 版 */ export default { props: { playList: { type: Array, required: true } }, render () { return ( <div style={{width: '100%', height: '100%'}} ref={'father'}> { this.playList && this.playList.map((item, index) => { return ( <ChildComponents key={index} ref={index} zIndex={index} visible={true} backValue={this.backValue} info={item} width={600} height={400} /> ) }) } </div> ) }, methods: { backValue (left, top, zIndex) { this.$refs[zIndex].$el.style.top = `${top}px` this.$refs[zIndex].$el.style.left = `${left}px` } } }
<!-- 父组件代码片段 vue 文件版 --> <template> <div ref="father" style"width: 100%, height: 100%" > <ChildComponents v-for="(item, index) in playList" :key="index" :ref="index" :visible="true" :z-index="index" :back-value="backValue" :info="item" :close="close" :width="600" :height="400" /> </div> </template> <script> export default { components: { VideoPlayerModal }, props: { playList: { type: Array, required: true } }, methods: { backValue (left, top, zIndex) { this.$refs[zIndex][0].$el.style.top = `${top}px` this.$refs[zIndex][0].$el.style.left = `${left}px` } } } </script>
设置子组件的围栏范围
这个功能只需要在 onmousemove 事件中进行判断 子容器的 top 和 left 是否超出浏览器的可视范围
/* * 1. this.width 数据为父组件传递进来的 width 值,或者子组件本身设置的默认值 * 2. this.height 数据为父组件传递进来的 height 值,或者子组件本身设置的默认值 */ move (e) { // 判断 flag 是否允许移动 if (!this.moveFlag) return // 判断是否超出左边视图 if (this.$refs.fatherBox.offsetLeft < this.width / 2) { // 禁止弹框移动 this.moveFlag = false // 设置弹框左边位置 this.left = this.width / 2 + 10 // 调用回调函数把偏移量暴露给父组件 this.backValue(this.left, this.top, this.zIndex) return } // 判断是否超出右边视图 if (this.$refs.fatherBox.offsetLeft > document.body.clientWidth - this.width / 2) { // 禁止弹框移动 this.moveFlag = false // 设置弹框右边位置 this.left = document.body.clientWidth - this.width / 2 - 10 // 调用回调函数把偏移量暴露给父组件 this.backValue(this.left, this.top, this.zIndex) return } // 判断是否超出顶部视图 if (this.$refs.fatherBox.offsetTop < this.height / 2 + 70) { // 禁止弹框移动 this.moveFlag = false // 设置弹框顶部位置 this.top = this.height / 2 + 70 + 10 // 调用回调函数把偏移量暴露给父组件 this.backValue(this.left, this.top, this.zIndex) return } // 判断是否超出底部视图 if (this.$refs.fatherBox.offsetTop > document.body.clientHeight - this.height / 2 - 50) { // 禁止弹框移动 this.moveFlag = false // 设置弹框底部位置 this.top = document.body.clientHeight - this.height / 2 - 50 - 10 // 调用回调函数把偏移量暴露给父组件 this.backValue(this.left, this.top, this.zIndex) return } // 设置弹框左边位置 this.left = e.clientX - this.startLeft // 设置弹框右边位置 this.top = e.clientY - this.startTop // 调用回调函数把偏移量暴露给父组件 this.backValue(this.left, this.top, this.zIndex) }
子组件还要设置一个当鼠标超出子容器时的 onmouseout 事件,用来防止不可预期的 bug 问题
mouseOut (e) { this.moveFlag = false }
标签:
HTML,拖拉功能
常春岛资源网 Design By www.syssdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
常春岛资源网 Design By www.syssdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 智中之宝新计划怎么触发?任务完成攻略
- 吴业坤.2015-Kwan.Gor【星娱乐】【FLAC分轨】
- 陈雪凝.2024-我新长出的犄角(EP)【少城时代】【FLAC分轨】
- 林志颖.1994-火热的心【飞碟】【WAV+CUE】
- 半糖初恋
- 大脚野人日落 Sasquatch Sunset
- 独角兽塞尔玛 Thelma the Unicorn
- 群星《世界顶级汽车音响试音王(嗨歌王)24K金碟》16CD[WAV+CUE][7.9G]
- 《曾宝仪4CD合集》[WAV+CUE][2.3G]
- 周杰伦《八度空间》台湾手版[WAV+CUE][475M]
- 咏月风雅前期怎么玩 前期组队玩法解析
- 咏月风雅攻略大全 新手入门必看攻略
- 咏月风雅公测福利大全 有哪些奖励
- dnf装备成长攻略
- 鸣潮丹瑾适配武器选什么 丹瑾四星五星武器推荐