两小球冲突，仿优信，拖动小球

tsx:

import React, { Component, createRef } from 'react';
import './index.less'
interface Props { }
interface State { }class Ball extends Component<Props, State> {// ref获取线divline = createRef<HTMLDivElement>()// wrap左边到body的left值x: number = 0// 移动距离mx: number = 0// 整体最大盒子宽px: number = 0// 线的当前宽wx: number = 0// 左球 距离bodylboll: number = 0// 右球 距离bodyrboll: number = 0constructor(props: Props) {super(props)this.state = {}}FnStart(e: React.TouchEvent<HTMLDivElement>) {// 球到左body的left减wrap到body的left值this.x = e.changedTouches[0].pageX - (e.target as HTMLDivElement).offsetLeftdocument.ontouchmove = this.FnMove.bind(this)document.ontouchend = this.FnEnd.bind(this)}FnMove(e: TouchEvent) {e.stopPropagation()// 保证有线盒子,没有返回falseif (!this.line.current) return false// 保证父盒子的div存在if (!this.line.current.parentElement) return false// 获取包裹盒子的宽this.px = this.line.current.parentElement.clientWidth;if (!this.wx) {this.wx = this.px}const nowLx = this.lbollconst nowRx = this.rbollthis.lboll = this.line.current.parentElement.children[1].getBoundingClientRect().leftthis.rboll = this.line.current.parentElement.children[2].getBoundingClientRect().left// 把目标元素当做div盒子const t = (e.target as HTMLDivElement)// 移动的距离this.mx = e.changedTouches[0].pageX - this.x// 如果移动距离超过最大值 移动的值超过(包裹盒子的宽-球体的宽)// 线的宽if (this.mx > this.px - t.clientWidth) {// 把移动距离等于最大值this.mx = this.px - t.clientWidth}// 如果移动距离小于最小值 移动的值小于最开始的值 0 if (this.mx < 0) {// 把移动的值赋值初始值this.mx = 0}if (t.className === 'l-ball') {// 当前线体的宽度this.wx = this.rboll - this.lboll// 线定位在移动的距离加上目标元素 球 一半宽this.line.current.style.left = this.mx + t.clientWidth / 2 + 'px'// 设置左球的定位t.style.left = this.mx + 'px'// 调整线条宽度this.line.current.style.width = this.wx + 'px'// 如果线条过短,也就是说两球距离太近,并且判断球移动的方向要继续减小线条长度if (this.wx < 30 && nowLx <= this.lboll) {// 判断球对盒子的left值是否在最大值（父盒子的宽减去一个球的宽度就是最大值）if (t.offsetLeft + t.clientWidth < this.px - t.clientWidth) {// 右球定位的left值为左球的left值加上球体宽度(this.line.current.parentElement.children[2] as HTMLDivElement).style.left = t.offsetLeft + t.clientWidth + 'px'} else {// 右球最大值为父盒子减去一个球体的宽度(this.line.current.parentElement.children[2] as HTMLDivElement).style.left = this.px - t.clientWidth + 'px'}}// 左球的定位值大于或等于最大盒子的宽去掉左右两球，（触边）if (t.offsetLeft >= this.px - t.clientWidth * 2) {// 就把左球的定位等于最大值t.style.left = this.px - t.clientWidth * 2 + 'px'// 线体调整定位在中间this.line.current.style.left = this.px - t.clientWidth * 1.5 + 'px'}} else {// 操作目标元素的css样式的left t.style.left = this.mx + 'px'// 当前线体的宽度this.wx = this.rboll - this.lboll// 移动时调整线体宽度this.line.current.style.width = this.wx + 'px'// 如果两球距离过近，并且判断球移动的方向要继续减小线条长度if (this.wx < 30 && nowRx > this.rboll) {// 左球的定位调整为右球的定位left值减去一个小球的宽度(this.line.current.parentElement.children[1] as HTMLDivElement).style.left = t.offsetLeft - t.clientWidth + 'px'// 如果右球的定位减去半个球的宽度大于0if (t.offsetLeft - t.clientWidth / 2 > 0) {// 线体定位调整为定位宽减去一半球体宽this.line.current.style.left = t.offsetLeft - t.clientWidth / 2 + 'px'}}// 如果右球的定位小于或者等于球体宽度（触边）if (t.offsetLeft <= t.clientWidth) {// 右球定位值，最小为也要为左球留一个宽度，也就是右球最小宽为一个球体宽t.style.left = t.clientWidth + 'px';// 左球定位触边(this.line.current.parentElement.children[1] as HTMLDivElement).style.left = 0 + 'px'// 线体宽度调整为球体宽度this.line.current.style.width = t.clientWidth + 'px'}}}FnEnd(e: TouchEvent) {document.ontouchmove = null}render() {return (<div className='wrap'><div className='line' ref={this.line}></div><div className='l-ball' onTouchStart={this.FnStart.bind(this)} ></div><div className='r-ball' onTouchStart={this.FnStart.bind(this)}></div></div>)}}export default Ball

less:

 .wrap {width: 500px;height: 40px;position: relative;background-color: #ddd;.line {background-color: aqua;width: 500px;height: 5px;position: absolute;top: 50%;transform: translateY(-50%);}.l-ball {width: 40px;height: 40px;border-radius: 50%;background: rgb(148, 224, 6);position: absolute;cursor: pointer;left: 0;}.r-ball {width: 40px;height: 40px;cursor: pointer;background: rgb(148, 224, 6);border-radius: 50%;position: absolute;left: 500px-40px;}}

要记住写路由！

两小球冲突，仿优信，拖动小球相关推荐

vue原生小球抛物线仿优信二手车
HTML代码 HTML代码可以放到页面的最后边,因为用的是固定定位所以不会影响代码的正常运行 <div v-for="ball in balls&qu ...
仿优信二手车品牌选择demo
不知道为啥,markdown编辑器不能用,一打开就奔溃,换个浏览器也不行,重启也不好使,估计是csdn那块出问题了吧:索性这会想写就干脆用普通编辑器写了,排版不好了大伙多担待.项目实现方法如果有更好的 ...
鹅厂系列三 : 仿QQ消息拖动小球
未来会怎样,我不知道,我只是想为了比今天好老规矩,看看效果嗯,前面自定义了两个视图容器,今天这个是自定义View,开始自定义前,我们应该理清自己的思路,怎么来做这个东西.用我们的QQ,我们会发现, ...
【Android自定义控件】之仿网易星球浮动小球
仿网易星球浮动小球读呗开发过程中遇到新需求,类似于网易星球收集黑钻的界面,考虑到可能也有人会使用,索性封装成库,后面好移植使用先看看需要实现的效果: 需求分析: 数据集合可能是int.double ...
仿网易星球浮动小球、仿蚂蚁森林动效
StarFloatView 项目地址:ErChenZhang/StarFloatView 简介:仿网易星球浮动小球.仿蚂蚁森林动效更多:作者提 Bug 标签: 示例:
[JAVA]简单的鼠标拖动小球
逻辑基本流程: 1.在面板上画出一个小球 2.获取鼠标坐标 3.将鼠标坐标与小球坐标比较 3.1 鼠标悬浮在小球上时,面板文字显示"please click",同时将悬浮表示mar ...
完整视频播放器封装库，仿优酷
目录介绍 1.关于此视频封装库介绍 1.1 能够满足那些业务需求 1.2 对比同类型的库有哪些优势 2.关于使用方法说明 2.1 关于gradle引用说明 2.2 添加布局 2.3 最简单的视频播放器 ...
第五课实战go语言改造php仿优酷-RabbitMQ改造项目
第五课实战go语言改造php仿优酷-RabbitMQ改造项目 tags: Beego 慕课网 categories: RabbitMQ 五种工作模式文章目录第五课实战go语言改造php仿优酷- ...
优酷视频整段代理php,thinkphp仿优酷带数据源码|php仿优酷视频源码带后台功能强大...
本项目是仿优酷官网,优酷官网是一个集多种知识面为一体的网站,能全面的锻炼我们的技能,所以我们决定仿优酷网. 本项目后台主要实现了:用户管理.分类管理.视频管理.评论管理.权限管理.轮播管理.网站配置和 ...

两小球冲突，仿优信，拖动小球

两小球冲突，仿优信，拖动小球相关推荐

最新文章

热门文章