Dragging element outside of iFrame, and then releasing, causes drag to not stop

[drewjenkins]

trafficstars

STR

1. Put react-draggable in an iFrame with an element
2. Put that iFrame on a parent page
3. Drag that element off of the iFrame, and then release
4. Move cursor back to the iFrame

Actual Results: Drag is still happening Expected Result: Item to no longer be dragging

It also looks like the onStop handler isn't being called.

I reproduced this in Chrome 68.0.3440.106 (Official Build) (64-bit) MacOS High Sierra 10.13.6

[Link-69]

Seconding this, the issue is present on Edge & Chrome (Firefox is ok).

Seems to be the same issue as jquery draggable, which is fixed on the later by setting the option iframeFix to true. Would be nice to have the same behavior. Thanks.

[andrewzjl]

How is the fix now? Does any body work on it? I meet the same problem and I don't know how to set the iframeFix.

[andrewzjl]

I find the solution as referred to https://www.cnblogs.com/lovesong/p/3367322.html

// js

  onDragStart = () => {
    this.setState({ isDragging: true })
  }
  onDragStop = (e, d) => {
    this.onDrag(e, d)
    this.setState({ isDragging: false })
  }

// jss / css
cover: {
    zIndex: 1000,
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%'
  }

// when dragging, add a cover to the iframe
{isDragging && <div className={classes.cover} />}