{"action":"created","issue":{"url":"https://api.github.com/repos/react-dnd/react-dnd/issues/735","repository_url":"https://api.github.com/repos/react-dnd/react-dnd","labels_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/735/labels{/name}","comments_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/735/comments","events_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/735/events","html_url":"https://github.com/react-dnd/react-dnd/issues/735","id":220797111,"number":735,"title":"rendering a new sibling in front of drag source terminates drag operation","user":{"login":"jedwards1211","id":1448194,"avatar_url":"https://avatars0.githubusercontent.com/u/1448194?v=4","gravatar_id":"","url":"https://api.github.com/users/jedwards1211","html_url":"https://github.com/jedwards1211","followers_url":"https://api.github.com/users/jedwards1211/followers","following_url":"https://api.github.com/users/jedwards1211/following{/other_user}","gists_url":"https://api.github.com/users/jedwards1211/gists{/gist_id}","starred_url":"https://api.github.com/users/jedwards1211/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jedwards1211/subscriptions","organizations_url":"https://api.github.com/users/jedwards1211/orgs","repos_url":"https://api.github.com/users/jedwards1211/repos","events_url":"https://api.github.com/users/jedwards1211/events{/privacy}","received_events_url":"https://api.github.com/users/jedwards1211/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-04-10T23:19:01Z","updated_at":"2018-03-08T08:07:37Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"I made a variation of `examples/04 Sortable/Simple` where the card list is a drop target instead of the cards being drop targets.  It worked fine...\r\n\r\nBut then, I made the card list show the message \"You're dragging card 1\" etc. **above** the cards if a card is being dragged.  With this simple change, dragging fails 90% of the time; it stops immediately after it starts.\r\n\r\nI'm not 100% sure why, but Chrome is firing a `dragend` event on the dragging card right after I start dragging it; I think Chrome is firing it either because the DOM element is getting moved or remounted, even though the React element is not.\r\n\r\nShowing the message **below** the cards doesn't break anything, because all of the card DOM elements don't have to get moved.\r\n\r\nIt's a simple, reasonable change with disastrous implications: `react-dnd` has little control over how React manages the DOM elements, and hence little ability to prevent spurious `dragend` events.\r\n\r\nThe only solution I can imagine is for `react-dnd-html5-backend` to only listen to the body element, and use `document.elementFromPoint` and DOM traversal to figure out the corresponding `DragSource`s and `DropTarget`s to notify.  Can anyone imagine a better solution.\r\n\r\nRepro code:\r\n```jsx\r\nimport React from 'react'\r\nimport {DragDropContext, DragSource, DropTarget} from 'react-dnd'\r\nimport HTML5Backend from 'react-dnd-html5-backend'\r\nimport {throttle} from 'lodash'\r\n\r\nconst CARD = 'card'\r\n\r\nconst cardHeight = 30\r\n\r\nconst cardStyle = {\r\n  border: '1px dashed gray',\r\n  padding: '0.5rem 1rem',\r\n  height: cardHeight,\r\n  backgroundColor: 'white',\r\n  cursor: 'move',\r\n}\r\n\r\nconst cardSource = {\r\n  beginDrag: ({id, index}) => ({id, index}),\r\n}\r\n\r\nlet Card = ({text, connectDragSource, isDragging}) => {\r\n  const opacity = isDragging ? 0 : 1\r\n  return connectDragSource(\r\n    <div style={{...cardStyle, opacity}}>\r\n      {text}\r\n    </div>\r\n  )\r\n}\r\n\r\nCard = DragSource(CARD, cardSource, (connect, monitor) => ({\r\n  connectDragSource: connect.dragSource(),\r\n  isDragging: monitor.isDragging(),\r\n}))(Card)\r\n\r\nconst cardListTarget = {\r\n  canDrop() {\r\n    return true\r\n  },\r\n  hover: throttle((props, monitor, component) => {\r\n    const dragOffset = monitor.getClientOffset()\r\n    const item = monitor.getItem()\r\n    if (!component.ref || !dragOffset || !item) return\r\n\r\n    const rect = component.ref.getBoundingClientRect()\r\n    const y = dragOffset.y - rect.top\r\n    const toIndex = y / cardHeight\r\n\r\n    component.moveCard(item.id, toIndex)\r\n  }, 100),\r\n}\r\n\r\nclass CardList extends React.Component {\r\n  state = {\r\n    draggingCard: null,\r\n    cards: [\r\n      {\r\n        id: 1,\r\n        text: 'Write a cool JS library',\r\n      }, {\r\n        id: 2,\r\n        text: 'Make it generic enough',\r\n      }, {\r\n        id: 3,\r\n        text: 'Write README',\r\n      }, {\r\n        id: 4,\r\n        text: 'Create some examples',\r\n      }\r\n    ]\r\n  }\r\n  moveCard(cardId, toIndex) {\r\n    const {cards} = this.state\r\n    const dragIndex = cards.findIndex(card => card.id === cardId)\r\n    if (dragIndex < 0) return\r\n\r\n    const newCards = [...cards]\r\n    newCards.splice(dragIndex, 1)\r\n    toIndex = Math.min(toIndex, newCards.length)\r\n    newCards.splice(toIndex, 0, cards[dragIndex])\r\n\r\n    this.setState({cards: newCards})\r\n  }\r\n  render() {\r\n    const {cards} = this.state;\r\n    const {connectDropTarget, draggingCard} = this.props\r\n\r\n    return connectDropTarget(\r\n      <div ref={c => this.ref = c} style={{width: 400, height: 800}}>\r\n        {/* DND BREAKS UNLESS THE FOLLOWING LINE IS COMMENTED OUT */}\r\n        {draggingCard && <div>You're dragging card {draggingCard.id}</div>}\r\n        {cards.map((card, i) =>\r\n          <Card key={card.id} index={i} id={card.id} text={card.text} />\r\n        )}\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nCardList = DropTarget(CARD, cardListTarget, (connect, monitor) => ({\r\n  connectDropTarget: connect.dropTarget(),\r\n  draggingCard: monitor.getItem(),\r\n}))(CardList)\r\n\r\nexport default DragDropContext(HTML5Backend)(CardList)\r\n```"},"comment":{"url":"https://api.github.com/repos/react-dnd/react-dnd/issues/comments/371411268","html_url":"https://github.com/react-dnd/react-dnd/issues/735#issuecomment-371411268","issue_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/735","id":371411268,"user":{"login":"neutrinog","id":166412,"avatar_url":"https://avatars2.githubusercontent.com/u/166412?v=4","gravatar_id":"","url":"https://api.github.com/users/neutrinog","html_url":"https://github.com/neutrinog","followers_url":"https://api.github.com/users/neutrinog/followers","following_url":"https://api.github.com/users/neutrinog/following{/other_user}","gists_url":"https://api.github.com/users/neutrinog/gists{/gist_id}","starred_url":"https://api.github.com/users/neutrinog/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/neutrinog/subscriptions","organizations_url":"https://api.github.com/users/neutrinog/orgs","repos_url":"https://api.github.com/users/neutrinog/repos","events_url":"https://api.github.com/users/neutrinog/events{/privacy}","received_events_url":"https://api.github.com/users/neutrinog/received_events","type":"User","site_admin":false},"created_at":"2018-03-08T08:07:37Z","updated_at":"2018-03-08T08:07:37Z","author_association":"NONE","body":"I'm experiencing this same issue."}}
{"actor":{"display_login":"neutrinog"}}