宁波建网站推荐,网站配色 橙色,韩国世界杯出线几次,泰安网站制作公司电话react-draggable 是在使用 React 时经常用到的拖拽库#xff0c;不过在使用时#xff0c;下面是一些常见的问题#xff0c;做此记录 1、在移动端中使用 react-draggable 进行拖拽操作时,在拖拽内部onClick事件是失效的 解决方案#xff1a;使用onTouchStart来替换onClick事… react-draggable 是在使用 React 时经常用到的拖拽库不过在使用时下面是一些常见的问题做此记录 1、在移动端中使用 react-draggable 进行拖拽操作时,在拖拽内部onClick事件是失效的 解决方案使用onTouchStart来替换onClick事件
button style{{float:right}} classNamedelete-btn data-card-id{card.id} onTouchStart{(){handlerDeleteCard(card.id)}} X/button2、拖拽结束就会误触被 包裹的元素中的 click 事件
Draggablebutton onClick{handleClick}我是一个可拖拽的按钮/button
/Draggable解决方案通过手动维护一个“是否处于拖拽状态”的标识来做判断
import * as React from react;
import Draggable from react-draggable;import ./style.css;export default function App() {let isDragging false;const handleDrag () {isDragging true;};const handleStop () {console.log(handleStop);// 触发 onStop 后会触发 onClick加个 setTimeout 是为了让修改不“马上”发生导致 handleClick 拿到的不是预期的结果setTimeout(() (isDragging false), 0);};const handleClick () {console.log(handleClick);if (isDragging) {return;}console.log(啊我被 click 了);};return (divpreact-draggable 拖拽时规避误触发内容中的 click 事件/pDraggable onDrag{handleDrag} onStop{handleStop}button onClick{handleClick}我是一个可拖拽的按钮/button/Draggable/div);
}
