Question

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

我能够正确拖动我的DragSources，但DropTargets不接受它们（或者被拖过来做出反应）。

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

非常感谢任何帮助。

的DragSource：

"vile"

DropTarget的：

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)}}/>
    );
  }
}

自定义拖动图层：

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}/>
    );
  }
}

Answer 1

问题是react-dnd-touch-backend库中的这个问题： https://github.com/yahoo/react-dnd-touch-backend/issues/34

回滚到版本0.2.7解决了这个问题。

React-dnd在iOS上无法在Cordova中运行

1 个答案: