Is there an option in React-DnD that allows you to lower targets based on a drag object that crosses over 50% of the area at the target point?

Question

I worked on response-dnd (which is a drag and drop component). Thus, the far-reaching target is identified based on the mouse pointer; I wonder if there is any option to change it, such that the drop target should be identified based on the drag object, crosses more than 50% of the target.

which is similar to the jQuery UI drag and drop function, which contains 'tolerance: intersect' in droppable elements.

Answer 1

Look sortable example to React-DnD, in particular targeting function cardTarget:

const cardTarget = {
  hover(props, monitor, component) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }

    // Determine rectangle on screen
    const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();

    // Get vertical middle
    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

    // Determine mouse position
    const clientOffset = monitor.getClientOffset();

    // Get pixels to the top
    const hoverClientY = clientOffset.y - hoverBoundingRect.top;

    // Only perform the move when the mouse has crossed half of the items height
    // When dragging downwards, only move when the cursor is below 50%
    // When dragging upwards, only move when the cursor is above 50%

    // Dragging downwards
    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
      return;
    }

    // Dragging upwards
    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
      return;
    }

    // Time to actually perform the action
    props.moveCard(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it better to avoid mutations,
    // but it good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  }
};

These two lines, I think, are what you are looking for:

// Dragging downwards
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
  return;
}

// Dragging upwards
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
  return;
}

It checks to see if the element you are hanging hangs at the 50% threshold to move the element, and then it performs the action in order.