HTML 拖拉功能的实现代码

本文关键讲解了HTML 拖拖拉拉作用的完成代码,文中给各位讲解的特别详尽，对我们的学习培训或工作中具备一定的参考参考使用价值，必须的小伙伴能够参考下

根据 vue

此作用核心内容便是根据 JavaScript 代码操纵 node 在界面上的左侧距与顶部距，不一样的的样式定位方式有不一样的解决方案

本方法选用position: absolute定位方式的解决方案

css 样式的关键代码
1
2
3
4
// 父容器核心样式

width: 100%;
height: 100%;

1
2
3
4
5
// 子容器核心样式
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 这三个事件，就可以实现最简单的移动

1
2
3
4
5
6
7
8
/*

• 在子容器创建的时候获取子容器相对于父容器的 top 和 left 位置
  */

mounted () {
this.left = this.$refs.fatherBox.offsetLeftthis.top=this.$refs.fatherBox.offsetTop
}

1
2
3
4
5
6
7
8
9
10
11
12
13
/*

• 鼠标按下时
• 1. 开启允许子容器移动的 flag
• 2. 记录鼠标点击时的位置信息
     */

mouseDown (e) {
// 设置允许弹窗移动的 flag
this.moveFlag = true
// 保存鼠标开始位置
this.startLeft = e.clientX - this.left
this.startTop = e.clientY - this.top
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*

• 鼠标移动时
• 1. 判断 flag 是否允许子容器移动
• 2. 设置弹框左边位置
• 3. 设置弹框右边位置
     */

move (e) {
// 判断 flag 是否允许移动
if (!this.moveFlag) return

// 设置弹框左边位置
this.left = e.clientX - this.startLeft
// 设置弹框右边位置
this.top = e.clientY - this.startTop

}

1
2
3
4
5
6
7
8
/*

• 鼠标按键弹起时
• 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 (

)
})
}

)
},
methods: {
backValue (left, top, zIndex) {
this.$refs[zIndex].$el.style.top = ${top}px
this.$refs[zIndex].$el.style.left = ${left}px
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!-- 父组件代码片段 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
       ( http://www.qlyl1688.com/articles/ycxzsq1302.html )
  }

  // 设置弹框左边位置
  this.left = e.clientX - this.startLeft
  // 设置弹框右边位置
  this.top = e.clientY - this.startTop

  // 调用回调函数把偏移量暴露给父组件
  this.backValue(this.left, this.top, this.zIndex)

}

子组件还要设置一个当鼠标超出子容器时的 onmouseout 事件，用来防止不可预期的 bug 问题

1
2
3
mouseOut (e) {
this.moveFlag = false
}

转自脚本之家