您现在的位置是：网站首页> 编程资料编程资料

HTML 拖拉功能的实现代码HTML5拖拉上传文件的简单实例

2023-10-08 278人已围观

简介 这篇文章主要介绍了HTML 拖拉功能的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

基于 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 ( 
 { this.playList && this.playList.map((item, index) => { return (  ) }) } 
 ) }, methods: { backValue (left, top, zIndex) { this.$refs[zIndex].$el.style.top = `${top}px` this.$refs[zIndex].$el.style.left = `${left}px` } } }

设置子组件的围栏范围

这个功能只需要在 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 拖拉功能的文章就介绍到这了,更多相关HTML 拖拉功能内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：HTML Table 空白单元格补全的实现方法html解决table设置宽度无效的问题详解html中表格table的行列合并问题解决html table实现复杂表头的示例代码Table自适应以及溢出的一些设置详解HTML页面自适应宽度的table(表格)HTML table 表格边框的实现思路html Table 表头固定的实现CSS设置table下tbody的滚动条的实现详解CSS的table-layout属性的用法html中table表格的内容水平和垂直居中显示

下一篇：HTML table行距的改变方法示例HTML Table 空白单元格补全的实现方法html解决table设置宽度无效的问题html中table固定头部表格tbody可上下左右滑动详解html中表格table的行列合并问题解决html table实现复杂表头的示例代码HTML页面自适应宽度的table(表格)HTML table 表格边框的实现思路html Table 表头固定的实现html中table表格的内容水平和垂直居中显示HTML table鼠标拖拽排序功能

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网