移动端盒子拖拽

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';
        }
      })
    })

  }, [])