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

getClientOffset/getSourceClientOffset null on drop #280

Closed
IL55 opened this issue Sep 16, 2015 · 3 comments
Closed

getClientOffset/getSourceClientOffset null on drop #280

IL55 opened this issue Sep 16, 2015 · 3 comments

Comments

@IL55
Copy link

IL55 commented Sep 16, 2015

Hi, since last update (i.e. from 1.1.5 to 1.1.7) I found that getClientOffset()/getSourceClientOffset() most time are null (for DragSourceMonitor).
Details: getClientOffset() is not null first time on drag start (I debug collect function), but it is null during moving and on endDrag.
I tried to debug dnd-react and core-dnd, but because I don't know well architecture I can't find the problem and I'm not sure if is bug or I'm using react-dnd wrong way...
But my implementation works well for 1.1.5, maybe I missed some breaking change ?

I use react-dnd next way (use-case: add photos to some page by drag-and-drop):

let cardSource = {
     beginDrag: function (props) {
     },
     endDrag: function(props, monitor, component) {
        // do some calculation with x,y and move dropped element to new position
     }
}

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
    sourceClientOffset: monitor.getSourceClientOffset(),
    clientOffset: monitor.getClientOffset()
  };
}

class PhotoSidebar extends PureView {
  render() {
    let photo = this.props.photo;
    let connectDragSource = this.props.connectDragSource;
    return connectDragSource(<img className="PhotoSidebar" src={photo.get('thumbnail')} />);
  }
}

PhotoSidebar.propTypes = {
  // Injected by React DnD:
  isDragging: PropTypes.bool.isRequired,
  connectDragSource: PropTypes.func.isRequired
};


export default DragSource('PhotoSidebar', cardSource, collect)(PhotoSidebar);

@gaearon
Copy link
Member

gaearon commented Sep 16, 2015

I can't reproduce the behavior you're describing with 1.1.5.

  • monitor.getClientOffset() and related methods are not (and were not) continuously updated when called from Drag Source's collecting function for performance. They are only continuously updated when you use a DragLayer. If it was working before for you, it must have been caused by some side effect in your code (e.g. parent component re-rendering and thus forcing collect() to re-evaluate). You can see for yourself that this behavior is consistent in examples/02 Drag Around/Custom Drag Layer by adding monitor.getClientOffset() to DraggableBox's collecting function and logging this.props.clientOffset in its render function.
  • Similarly, I can't reproduce monitor.getClientOffset() being available in endDrag method in 1.1.5. By the time it fires, the dragging has finished, so null is the correct value, and it is null for me both in 1.1.5 and 1.1.7. If you want to use the final offset, you should do so in drop() handler of the target—it's the one who received drop. If you still wish to do this in the drag source, the fix is easy: add return monitor.getClientOffset(); to the end of your drop() method, and then read monitor.getDropResult() from the drag source's endDrag().

I'm closing because there doesn't appear to be a real breaking change here: the fact that it worked before seems random and caused by something else that I can't reproduce.

@gaearon gaearon closed this as completed Sep 16, 2015
@gaearon
Copy link
Member

gaearon commented Sep 17, 2015

Related: #179

@shabegger
Copy link

shabegger commented May 10, 2016

On react-dnd 2.1.4, I am getting null from monitor.getClientOffset etc. in the drop() handler of the target. I do not need to track the position during dragging, but I need to know position at time of drop. I see no way to accomplish that right now.

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