How to get drop target element?

[mdmasumbillah]

I want to get drop target element.

[IamFonky]

If I understand you well, you want to get the full element (not just an ID related to it).

Even if i don't recommend it, you can try with this code :

https://codesandbox.io/s/react-dnd-fail-zft3i

If you just need an id or label to know witch drop target was used you can just use the drop spec and specify a drop spec for every targets with a custom dropFactory function

const dropFactory = (id) = (p) => {
// do something with the id like someArray[id]...
}
//Then use your factory in the useDrop like below
  const [dropTargetProps, dropTarget] = useDrop({
    accept: "Sometype",
    drop: dropFactory("myElementId"),
    collect: mon => mon
  });

[cuongdevjs]

If I understand you well, you want to get the full element (not just an ID related to it).

Even if i don't recommend it, you can try with this code :

https://codesandbox.io/s/react-dnd-fail-zft3i

If you just need an id or label to know witch drop target was used you can just use the drop spec and specify a drop spec for every targets with a custom dropFactory function

const dropFactory = (id) = (p) => {
// do something with the id like someArray[id]...
}
//Then use your factory in the useDrop like below
  const [dropTargetProps, dropTarget] = useDrop({
    accept: "Sometype",
    drop: dropFactory("myElementId"),
    collect: mon => mon
  });

Thank you. But I can get the location(top, left,..) of myDrag with respect to myDropTarget?

[mdmasumbillah]

@IamFonky and @cuongdevjs thank's for your valuable feedback. This work done.

[IamFonky]

@cuongdevjs I'm not sure to understand your question because in this case there is only one drop zone. You want to be able to know the exact drop position (x,y) in the drop zone?

Maybe this example can help you

https://codesandbox.io/s/react-dnd-target-bljol

[cuongdevjs]

Thanks so much :)

[cuongdevjs]

I have a question. Why my item drag zoomed-in when dragging? It's not in the initial size.

[IamFonky]

@cuongdevjs please provide an example (like I did on codesandbox) because I really don't see any size change on my examples

[cuongdevjs]

#1855 Please see my issue

[sytolk]

const boxTarget = {
  drop(props, monitor) {
    return props.onDrop(props, monitor);
  }
};

const TargetMoveFileBox = (props: Props) => {
  const { classes, canDrop, isOver, connectDropTarget, children } = props;
  const dragContent =
    canDrop && isOver ? (
      <div className={classes.dropzone}>{i18n.t('core:releaseToMoveDrop')}</div>
    ) : (
      undefined
    );
  return connectDropTarget(
    <div>
      {dragContent}
      {children}
    </div>
  );
};
export default DropTarget(
    props => props.accepts,
    boxTarget,
    (connect, monitor) => ({
      connectDropTarget: connect.dropTarget(),
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    })
  )(TargetMoveFileBox);

usage

<TargetMoveFileBox
        accepts={[DragItemTypes.FILE]}
        onDrop={this.handleFileMoveDrop}
       prop1
       prop2
      >
<div>TARGET</div>
</TargetMoveFileBox>

 handleFileMoveDrop = (props, monitor) => {
prop1 = props.props1;
prop2 = props.props2; //you will receive target props here
}

[sujoydutta67]

These are simple examples what if you have a bunch of dropTargets how can I differentiate them and how the monitor could be used to drop items