React-DnD 中是否有任何选项可以根据拖动对象启用放置目标，该拖动对象与放置目标中超过 50% 的区域相交？答案

【问题标题】：Is there any option in React-DnD, which enables drop targets based on drag object which intersects over 50% of area in drop target?React-DnD 中是否有任何选项可以根据拖动对象启用放置目标，该拖动对象与放置目标中超过 50% 的区域相交？
【发布时间】：2017-12-10 01:58:17
【问题描述】：

我一直在研究 react-dnd（它是拖放组件）。因此，根据鼠标指针识别远放置目标，我想知道是否有任何选项可以更改它，需要根据拖动对象与放置目标的 50% 以上相交来识别放置目标。

类似于 jQuery UI 拖放功能，在可放置元素中包含 'tolerance: intersect'。

【问题讨论】：

可以输入你的代码吗？

标签： reactjs jquery-ui drag-and-drop react-dnd

【解决方案1】：

查看 React-DnD 的 sortable example，特别是 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's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  }
};

这两条线我认为是你正在寻找的：

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

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

它会在悬停时检查，如果您悬停的项目超过了移动项目的 50% 阈值，那么它将执行重新排序操作。

【讨论】：