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) => (
//position:{x:Math.floor(Math.random() * 400),y:Math.floor(Math.random() * 200)}
<Draggable key={card.id} defaultPosition={card.position} bounds = {{top:0}}>
<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事件是失效的
示例代码:
<button style={{float:'right'}} className="delete-btn"
data-card-id={card.id} onTouchStart={()=>{handlerDeleteCard(card.id)}} >X</button>