[go: up one dir, main page]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于在其中使用iframe相关的情况 #823

Open
GJW666888 opened this issue Jun 28, 2022 · 3 comments
Open

关于在其中使用iframe相关的情况 #823

GJW666888 opened this issue Jun 28, 2022 · 3 comments

Comments

@GJW666888
Copy link

在该组件中使用iframe标签内嵌页面时,经常会遇到拖拽结束时鼠标如果在iframe标签页面上时,继续移动鼠标(此时未点击拖拽组件),拖拽组件的分割线依然跟着变化,没有停止

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

or

Post a link to a CodeSandbox. You can start by forking this one.

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

@bxclib2
Copy link
bxclib2 commented May 5, 2023

这是由于iframe 没有on mouse up event 造成的,目前不知道咋解决,我在一个项目中也遇到了非常类似的问题

@bxclib2
Copy link
bxclib2 commented May 5, 2023

Let me translate this in English to seek help from others:

this split pane won't work well when some pane has iframe, objects or embed elements in html. According to the MDN, these elements are not interactive elements so they do not have on mouse up event. Hence, when we release the mouse inside the area of objects or embeds, the mouse event won't be triggered. Any help or ideas about the fix would be highly appreciated.

Thanks!!

@HoikanChan
Copy link
HoikanChan commented Jan 2, 2024

I fix this by modifying my iframe element stlye about "pointer-events" when dragging.
It's quite a trouble to get the element,and I used useContext.

function SplitPaneWrapper({ className, children, ...props }: Props) {
  const [sandboxRef] = useSandboxEle();
  const onDragStarted = () => {
    sandboxRef.current.style['pointer-events'] = 'none'
  }
  const onDragFinished = () => {
    sandboxRef.current.style['pointer-events'] = 'auto'
  }
  return (
    <SplitPane
      className={className}
      defaultSize={props.defaultSize ?? '50%'}
      onDragStarted={onDragStarted}
      onDragFinished={onDragFinished}
      {...props}
    >
      {children}
    </SplitPane>
  );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants