Question

react-dnd 列表拖动，现在想只拖动列表中图片位置进行拖拽怎么改？也就是拖动#icon-drag，这个位置

const Card = React.forwardRef(
  ({ defaultCards,setDefaultCards, index, text, card, setCards, listTotal, isDragging, connectDragSource, connectDropTarget ,connectDragPreview}, ref) => {
    const elementRef = useRef(null)
    connectDropTarget(elementRef)
    connectDragSource(elementRef)
    connectDragPreview(elementRef)
    const opacity = isDragging ? 0 : 1
    useImperativeHandle(ref, () => ({
      getNode: () => elementRef.current,
    }))
    return connectDragPreview(
      <div className="card" style={{ opacity }}>
        <svg className="icon type_logo" aria-hidden="true">
          <use xlinkHref="#icon-pic"></use>
        </svg>
        <span>{text}</span>
        <span className="tail-layout">
         <svg onClick={delSelectedField} className="icon isDelete" aria-hidden="true">
            <use xlinkHref="#icon-del-field"></use>
         </svg>
         <svg ref={elementRef} className="icon drag" aria-hidden="true">
             <use xlinkHref="#icon-drag"></use>
         </svg>
        </span>
      </div>
    )
  },
)
export default DropTarget(
  ItemTypes.CARD,
  {
    hover(props, monitor, component) {
      if (!component) {
        return null
      }
      // node = HTML Div element from imperative API
      const node = component.getNode()
      if (!node) {
        return null
      }
      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 = node.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
    },
  },
  (connect) => ({
    connectDropTarget: connect.dropTarget(),
  }),
)(
  DragSource(
    ItemTypes.CARD,
    {
      beginDrag: (props) => ({
        id: props.id,
        index: props.index,
      }),
    },
    (connect, monitor) => ({
      connectDragSource: connect.dragSource(),
      isDragging: monitor.isDragging(),
    }),
  )(Card),
)

Answer 1

这个问题可以参考这篇文章看一下使用React DnD实现列表拖拽排序