react实现拖拽(原生)

最新推荐文章于 2024-09-25 10:59:43 发布

爱吃香菜的小张

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量975

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_57157220/article/details/119892711

版权

本文介绍了如何在React中实现原生的拖拽功能。通过在拖拽元素上监听touchstart事件，获取鼠标触碰位置，然后在touchmove事件中计算实时位置，并更新元素的left和top样式，实现拖拽效果。实现过程中需要注意元素的定位样式以及this的使用。

摘要由CSDN通过智能技术生成

react实现原生的拖拽

大致思路如下:1.在给要拖拽的元素添加touchstart事件。在touchstart事件里面获取到鼠标在元素上的位置ev.changedTouches[0].pageX-ev.target.offsetLeft，然后添加touchmove的事件，在touchmove事件里面获取ev.changedTouches[0].pageX-上面求出的鼠标的位置就求当前的位置，然后给当当前要拖拽的元素设置style的left与top值，话不多说上代码注意样式里面要加定位这里的this只能是this,let 的话会出现问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/browser.js"></script>
    <script src="js/react.js"></script>
    <script src=