Framer拖动容器上的手势，但里面没有子元素
Framer拖动容器上的手势，但里面没有子元素
提问于 2022-11-16 11:49:09
我使用Framer中的拖动手势创建了一个旋转木马，每一张幻灯片都包含一个视频组件和一些文本。有没有办法在整个旋转木马轨道上有一个拖动手势，但不包括每一张幻灯片中的视频组件，即使它是一个子元素。
当用户试图将容器拖到视频上时，它仍然会执行拖动手势，但同时也会播放视频，因为它将指针向下的事件作为onDragStart和onClick事件。我怎么能把这两者分开，这样视频就不是可拖的，而是只能点击的？
我尝试过使用isDragging状态来更新onDragStart，然后在它更新为true时禁用onClick，这种状态有时起作用，但其他状态不起作用。
回答 1
Stack Overflow用户
发布于 2022-11-16 14:43:38
我在这里周围找到了一份工作。解决方案是删除默认的拖放监听器，并根据事件目标手动启动或停止动画。老实说，弗雷默会有一个内置的dragControls.cancel功能，但不幸的是，没有。
我仍然让它从整个容器上的pointerDown事件开始，但是如果在任何阶段，目标单击的是里面的视频播放器，那么它就会取消事件。只是在我不想拖放的子元素中添加了一个“不拖动”的className。
const dragControls = useDragControls();
const onDragStart = (event, info) => {
if (!event.target.classList.contains("no-drag")) {
dragControls.start(event);
} else {
dragControls.componentControls.forEach((entry) => {
entry.stop(event, info);
});
}
};
<Wrapper>
<StyledTrack
ref={trackRef}
animate={controls}
drag="x"
dragConstraints={{
left: windowWidth - trackDimensions.innerWidth,
right: 0,
}}
dragControls={dragControls}
onPointerDown={onDragStart}
onDragEnd={onDragEnd}
dragListener={false}
style={{ x }}
>
{children}
</StyledTrack>
</Wrapper>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74459945
复制相关文章
相似问题
腾讯云开发者
