react实现拖拽（许愿墙）

html部分：

<div className='wish' onLoad={ loadHandler }>
    {
         wish.map((item, index) => {
               return <div className='target' key={index}>
                         <img src={arr[item.idx].src} />
                         <p>{item.value}</p>
                         <span onClick={() => del(index)}>X</span>
                      </div>
         })
    }
</div>

css部分：

// 父盒子设置大小  设置相对定位
.wish {
    width: 100% ;
    height: 400px;
    position: relative;
}
// 许愿块设置大小  设置绝对定位
.target {
    width: 100px;
    height: 100px;
    position: absolute;
}

js代码：

 // 拖拽
    const loadHandler = function () {
        // 1.获取所有的 target 愿望
        var targetAll = document.querySelectorAll('.target');

        var startX = 0;
        var startY = 0;

        // 2.渲染遍历出所有的 target , 给每一个target 都添加了touchstart事件
        for (let i = 0; i < targetAll.length; i++) {
          var target = targetAll[i]
        }
    
        // 3.获取鼠标所在 元素内的 x y 轴坐标
        target.addEventListener('touchstart', function (e) {
          startX = e.targetTouches[0].pageX - this.offsetLeft;
          startY = e.targetTouches[0].pageY - this.offsetTop;
        });
        
        // 4 获取移动的 x y 轴的量
        target.addEventListener('touchmove', function (e) {
          // 移动的 X 轴值
          var leftX = e.targetTouches[0].pageX - startX;
          // 获取 Y 轴值
          var topY = e.targetTouches[0].pageY - startY;
          // 获取 target 的宽度
          var thisW = e.targetTouches[0].target.clientWidth;
          // 获取 target 父级 container 的宽度
          var parentW = e.targetTouches[0].target.offsetParent.offsetParent.clientWidth;
          // 获取 target 的高度
          var thisH = e.targetTouches[0].target.offsetParent.clientHeight;
          // 获取 target 父级 container 的高度
          var parentH = e.targetTouches[0].target.offsetParent.offsetParent.clientHeight;

           
          if (leftX <= 0) {  // x 开始位置
            leftX = 0;
          }
    
          if (leftX >= parentW - thisW) {  // x 结束位置
            leftX = parentW - thisW;
          }
    
          if (topY <= 0) {  // y 开始位置
            topY = 0;
          }
    
          if (topY >= parentH - thisH) {  // y 结束位置
            topY = parentH - thisH;
          }
    
          this.style.left = leftX + "px"
          this.style.top = topY + 'px';
        });
        target.addEventListener('touchend', function (e) {
          // this.innerHTML = '你终于放弃揪着我了，谢谢!';
        });
      };

拖拽