Conflict with drag-n-drop extensions (such as dragdis.com for drag-n-drop bookmarking)

[TrevorHinesley]

I had been using Dragdis for quite some time, but noticed beginDrag (and any other drag-n-drop) events weren't executing while I had the extension enabled. I'm sure this isn't the only extension affected, and jQuery drag-n-drop is unaffected. I'm not sure what's conflicting.

[mikhuang]

React DnD also seems to conflict with the Filestack widget's drag and drop functionality

[jennybean]

I have experienced this issue as well. Filestack does not work in where React DnD is being used.

[Liz303]

Anyone found a solution to this? Working with filestack and react-beautiful-dnd works, but react-beautiful-dnd only supports x or y sorting, not sorting in a grid. I found a workaround to get filestack to work with react-dnd but it doesn’t meet my UI needs. By removing DragSource from the page I am able to get filestack to work. Here’s my example (this isn't working code but hopefully will give you an idea)

class DragArea extends React.Component {
    state = {
      draggableItems: [
        {id: 1, name: "first item"},
        {id: 2, name: "second item"},
        {id: 3, name: "third item"}
      ],
      dragAndDrop: false
    }
    addFile(filestackResponse) {
    // do some stuff in here
    }
    
    onError(file, error) {
    // handle error
    }
    
    render() {
      return (
        <div>
          <div onClick={() => {this.setState({dragAndDrop: !this.state.dragAndDrop})}}> {this.state.dragAndDrop ? "Draggable" : "Not Draggable"}</div>
          <ul className="draggable-items">
            <div className="filestack-upload-area" id="filestack-section-upload-primary">
                <FilestackUploader
                    dropzoneContainerId="filestack-section-upload-primary"}
                    type="area"
                    onSuccess={this.addFiles}
                    onError={this.onError}
                  />
              
             {this.state.draggableItems.map((item, index) => {
                if(this.state.dragAndDrop) {
                  /* Returns a react component wrapped in DragSource()
                  return (
                    <DraggableReactComponent/>
                  )
                } else {
                  return (
                    <ReactComponent/>
                  )
                }
             })}
           </ul>
         </article>
      );
    }
}

[NicoleRauch]

Any news on this? I am using a widget which uses react-dnd under the hood, and that killed my other D&D on the page (which was done with HTML5 droppable). Very unpleasant surprise...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.