React-dnd在iOS上的Cordova中不起作用

Question

我正在使用react-dnd-touch-backend。

我可以让我的DragSources正确拖动，但DropTargets不接受它们(或对被拖过时的反应)。

应用程序只为每个角色(DragSource和DropTarget)使用一个包装器组件。我还定义了一个自定义的拖动层。在添加自定义拖动层之前，拖放可以很好地工作，除了我的DragSources在iOS上是不可见的(这就是为什么我首先添加了拖动层)，但是现在我可以看到DragSources，但是DropTargets不起作用。

任何帮助都是非常感谢的。

DragSource：

import React from "react";
import cn from "util/cn";
import {isCordova} from "util/detect-platform";
import {DragSource} from "react-dnd";
import {getEmptyImage} from "react-dnd-html5-backend";

require("./style.scss");

const TYPE = "DRAG-CONTAINER";

const source = {
  beginDrag({value, left, top, children, DragPreviewComponent}) {
    return {value, left, top, children, DragPreviewComponent};
  }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
}

function getStyles(props) {
  const {left, top, isDragging} = props;
  const transform = `translate3d(${left}px, ${top}px, 0)`;

  return {
    transform: transform,
    WebkitTransform: transform,
    opacity: isDragging ? 0 : 1
  };
}

@DragSource(TYPE, source, collect)
export default class DragContainer extends React.Component {
  static propTypes = {
    value: React.PropTypes.any
  };
  static defaultProps = {style: {}};

  componentDidMount() {
    if(!isCordova()) {
      this.props.connectDragPreview(getEmptyImage(), {
        captureDraggingState: true
      });
    }
  }

  render() {
    const {className, isDragging, connectDragSource, style} = this.props;
    const classNames = cn(
      "Drag-container",
      isDragging ? "Drag-container--dragging" : null,
      className
    );

    return connectDragSource(
      <div {...this.props} className={classNames} value={null} style={{...style, ...getStyles(this.props)}}/>
    );
  }
}

DropTarget：

import React from "react";
import {DropTarget} from "react-dnd";
import cn from "util/cn";
require("./style.scss");

const TYPE = "DRAG-CONTAINER";

const target = {
  drop(props, monitor) {
    const {onDrop} = props;
    const {value} = (monitor.getItem() || {value: null});

    if(typeof onDrop === "function") {
      setTimeout(() => onDrop(value), 100);
    }
  }
};

function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  };
}

@DropTarget(TYPE, target, collect)
export default class DropContainer extends React.Component {
  static propTypes = {
    onDrop: React.PropTypes.func
  };

  render() {
    const {connectDropTarget, isOver, className} = this.props;
    const classNames = cn("Drop-container", isOver ? "Drop-container--over" : null, className);

    return connectDropTarget(
      <div {...this.props} className={classNames} onDrop={null} onDragEnter={null} onDragExit={null}/>
    );
  }
}

自定义拖动层：

import React from "react";
import {DragLayer} from "react-dnd";

const layerStyles = {
  position: "fixed",
  pointerEvents: "none",
  width: "100%",
  height: "100%",
  zIndex: 100,
  left: 0,
  top: 0
};

function getItemStyles(props) {
  const { initialOffset, currentOffset } = props;
  if (!initialOffset || !currentOffset) {
    return {
      display: 'none'
    };
  }

  let { x, y } = currentOffset;

  if (props.snapToGrid) {
    x -= initialOffset.x;
    y -= initialOffset.y;
    [x, y] = snapToGrid(x, y);
    x += initialOffset.x;
    y += initialOffset.y;
  }

  const transform = `translate(${x}px, ${y}px)`;
  return {
    transform: transform,
    WebkitTransform: transform
  };
}

@DragLayer(monitor => ({
  item: monitor.getItem(),
  itemType: monitor.getItemType(),
  initialOffset: monitor.getInitialSourceClientOffset(),
  currentOffset: monitor.getSourceClientOffset(),
  isDragging: monitor.isDragging()
}))
export default class CustomDragLayer extends React.Component {
  render() {
    const {item, itemType, isDragging} = this.props;
    if (!isDragging || !item) return null;
    const {DragPreviewComponent} = item;
    if(!DragPreviewComponent) return null;
    return (
      <div style={layerStyles}>
        <div style={getItemStyles(this.props)}>
          <DragPreviewComponent {...item}/>
        </div>
      </div>
    );
  }
}

Answer 1

问题出在react-dnd-touch-backend库中：https://github.com/yahoo/react-dnd-touch-backend/issues/34

回滚到版本0.2.7已修复此问题。