跳转至内容
上海创厦网络科技
IT服务专家
上海创厦网络科技上海创厦网络科技
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程

HTML 拖拉功能的实现代码

您在这里:
  1. 首页
  2. HTML
  3. 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.offsetLeft
  this.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 来识别具体的子组件实例

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

/*
* 父组件代码片段 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`
    }
  }
}
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


 


设置子组件的围栏范围

这个功能只需要在 onmousemove 事件中进行判断 子容器的 top 和 left 是否超出浏览器的可视范围

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

/*
* 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 问题

1
2
3

mouseOut (e) {
  this.moveFlag = false
}

到此这篇关于HTML 拖拉功能的文章就介绍到这了,更多相关HTML 拖拉功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

Category: HTMLstartupplaza2022年5月30日评论

作者: startupplaza

文章导航

历史的文章历史的文章:html+css实现分层金字塔的实例未来的文章未来的文章:在HTML中限制input 输入框只能输入纯数字的实现

Related Posts

html转pdf截图保存功能的实现
2022年5月30日
详解HTML中字体使用line-height依然不能垂直居中解决办法
2022年5月30日
浅谈HTML文件引入外部CSS文件时路径的写法总结
2022年5月30日
前端html换肤功能的实现代码
2022年5月30日
HTML外部样式表如何引入CSS样式
2022年5月30日
HTML表格跨行跨列操作(rowspan、colspan)
2022年5月30日

技术探讨

  • 使用HTML5捕捉音频与视频信息概述及实例
  • HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
  • 详解HTML5中的