react中使用react-draggable实现拖拽,并解决在移动设备中使用拖拽后点击事件无效

1.通过npm安装react-draggable

npm  i react-draggable

2.引入react-draggable

import Draggable from 'react-draggable'

3.例如我们需要生成心愿卡片并且利用组件Draggable实现心愿卡片的拖拽

 <div className="wish-cards" >

       {wishCards.map((card, index) => (

         <Draggable key={card.id} defaultPosition={card.position} >

           <div key={index} className="wish-card not-drageble" >

          //生成的心愿卡片为背景图片

           <div className="image-container" style={{ backgroundImage: `url(${card.image})`,width:'100px',height:'100px',backgroundSize:'contain',marginTop:'10px' }} >

             <span>{card.wish}</span>

             <button style={{float:'right'}} className="delete-btn"

               data-card-id={card.id} onMouseDown={()=>{handlerDeleteCard(card.id)}}>X</button>

           </div>

         </div>

        </Draggable>

       ))}

     </div>

4.在最后我们需要注意的是:在移动端中使用 react-draggable 进行拖拽操作时,在拖拽内部onClick事件是失效的

解决方案:使用onTouchStart来替换onClick事件

示例代码:

<button style={{float:'right'}} className="delete-btn"

               data-card-id={card.id} onTouchStart={()=>{handlerDeleteCard(card.id)}} >X</button>