移动端盒子拖拽

简介: 移动端盒子拖拽

react 移动端盒子拖拽


html结构


<div className='content' ref={boxs} >
        {
          lists.map((item, index) => {
            return (
              <span key={index}
                className='box'
                style={{ backgroundImage: `url(${item.img})`, top: item.top, left: item.left }}
              >
                {item.title}
                <div className='close' onClick={(e) => delCard(e, index)}></div>
              </span>
            )
          })
        }
      </div>


盒子的基本样式



.movecard>.content {
  border: 1px solid black;
  height: 400px;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}
.movecard>.content>.box {
  border: 1px solid black;
  position: absolute;
  border-radius: 3px;
  height: 60px;
  width: 60px;
  cursor: move;
  background-size: cover;
  background-repeat: no-repeat;
  color:white;
  box-sizing: border-box;
  padding-top: 10px;
}
.movecard>.content>.box .close{
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  line-height: 15px;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  position: absolute;
  background-color:white;
  color: red;
}
.movecard>.imgs {
  display: flex;
  justify-content: space-evenly;
  margin: 20px 0;
}
.movecard>.imgs img {
  border-radius: 3px;
  height: 60px;
  width: 60px;
}
.imgOn{
  border-radius: 3px;
  height: 60px;
  width: 60px;
  border: 3px solid rgb(98, 255, 98);
  box-sizing: border-box;
}


拖拽的方法


// 设置心愿卡片的拖动监听事件
  useEffect(() => {
    // 第一步:给元素添加开始触摸事件,获取元素原本对于浏览器的x,y位置
    boxs.current.addEventListener('touchstart', (e) => {
      if (e.target.nodeName !== 'SPAN') return;
      let X = e.touches[0].clientX;
      let Y = e.touches[0].clientY;
      let boxX = e.target.offsetLeft;
      let boxY = e.target.offsetTop;
      // 第二步:设置元素拖动事件,拖动时获取元素对于窗口的位置,
      // 使用这个位置-开始点击时对于窗口的位置+元素当前对于父盒子定位的偏移值
      // 就可以实时得到当前的偏移值,实时赋值给元素的top、left属性
      e.target.addEventListener('touchmove', (e) => {
        let { clientX, clientY } = e.touches[0];
        let moveX = clientX - X + boxX <= 0 ? 0 : clientX - X + boxX;
        let moveY = clientY - Y + boxY <= 0 ? 0 : clientY - Y + boxY;
        e.target.style.left = moveX + 'px';
        e.target.style.top = moveY + 'px';
        // 第三步:最后加个拖动的范围就可
        if (moveX >= 345 - e.target.clientWidth) {
          e.target.style.left = 345 - e.target.clientWidth + 'px';
        }
        if (moveY >= 395 - e.target.clientHeight) {
          e.target.style.top = 395 - e.target.clientHeight + 'px';
        }
      })
    })
  }, [])

目录
打赏
0
0
0
0
3
分享
相关文章
Ubuntu 20.04 安装 emsdk
Ubuntu 20.04 安装 emsdk
844 0
【云效流水线 Flow 测评】驾驭云海:五大场景下的云效Flow实战部署评测
云效是一款企业级持续集成和持续交付工具,提供免费、高可用的服务,集成阿里云多种服务,支持蓝绿、分批、金丝雀等发布策略。其亮点包括快速定位问题、节省维护成本、丰富的企业级特性及与团队协作的契合。基础版和高级版分别针对小型企业和大规模团队,提供不同功能和服务。此外,云效对比Jenkins在集成阿里云服务和易用性上有优势。通过实战演示了云效在ECS和K8s上的快速部署流程,以及代码质量检测和AI智能排查功能,展示了其在DevOps流程中的高效和便捷,适合不同规模的企业使用。本文撰写用时5小时,请各位看官帮忙多多支持,如有建议也请一并给出,您的建议能帮助我下一篇更加出色。
218875 19
当实时消费遇到 SPL:让数据处理更高效、简单
SLS 对实时消费进行了功能升级,推出了 基于 SPL 的规则消费功能。在实时消费过程中,用户只需通过简单的 SPL 配置即可完成服务端的数据清洗和预处理操作。通过SPL消费可以将客户端复杂的业务逻辑“左移”到服务端,从而大幅降低了客户端的复杂性和计算开销。
199 57
linux笔记 diff及patch的制作与使用
这篇文章是关于Linux系统中使用`diff`命令生成补丁文件以及使用`patch`命令应用这些补丁的详细教程和实战案例。
281 2
linux笔记 diff及patch的制作与使用
CentOS7安装MariaDB成功的实践
CentOS7安装MariaDB成功的实践
198 0
React 18 与之前版本的主要区别
【10月更文挑战第12天】 总的来说,React 18 的这些区别体现了 React 团队对于提升应用性能、用户体验和开发效率的持续努力。开发者需要适应这些变化,充分利用新特性来构建更出色的应用。同时,随着技术的不断发展,React 也将继续演进,为开发者带来更多的创新和便利。
全志H713红外IR遥控配置方法
这篇文章详细介绍了全志H713芯片平台配置红外遥控器的方法,包括获取遥控器规格、NEC协议的配置步骤、其他IR协议配置以及解决头码配置问题的方法。
432 5
全志H713红外IR遥控配置方法
|
11月前
|
知识图谱(Knowledge Graph)- Neo4j 5.10.0 使用 - Java SpringBoot 操作 Neo4j
知识图谱(Knowledge Graph)- Neo4j 5.10.0 使用 - Java SpringBoot 操作 Neo4j
490 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问