为什么我的 div 可以在较小的屏幕上拖动，但是当我在较大的屏幕上检查它时，我不再能够拖动它？

Question

此外，当我在更大的屏幕上查看 div 时，它的位置也会发生变化。如果我检查它在更大屏幕上的外观，div 的位置会完全改变。

jsfiddle：https://jsfiddle.net/annahisenberg/ft10ersb/20/

查看全屏：https://jsfiddle.net/annahisenberg/ft10ersb/20/show

代码：

class Drag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: this.props.x,
      y: this.props.y,
      showMoreOptionsPopup: false,
      showHelpModal: false
    };

    this.reff = React.createRef();

    this.dragMouseDown = this.dragMouseDown.bind(this);
    this.elementDrag = this.elementDrag.bind(this);
    this.closeDragElement = this.closeDragElement.bind(this);
    this.showMoreOptionsPopup = this.showMoreOptionsPopup.bind(this);
  }


  componentDidMount() {
    this.pos1 = 0;
    this.pos2 = 0;
    this.pos3 = 0;
    this.pos4 = 0;
  }

  dragMouseDown(e) {
    e.preventDefault();
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    document.onmouseup = this.closeDragElement;
    document.onmousemove = this.elementDrag;
  };

  elementDrag(e) {
    e.preventDefault();
    this.pos1 = this.pos3 - e.clientX;
    this.pos2 = this.pos4 - e.clientY;
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    this.setState({
      y: this.reff.current.offsetTop - this.pos2 + "px",
      x: this.reff.current.offsetLeft - this.pos1 + "px"
    });
  };

  closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  };

  showMoreOptionsPopup() {
    this.setState({
      showMoreOptionsPopup: !this.state.showMoreOptionsPopup
    });
  };

render() {
    return (
      <div>
         <a
            id="more_options_button"
             className={this.state.showMoreOptionsPopup ? 'open' : null}
             onClick={this.showMoreOptionsPopup}
             style={{ left: this.state.x, top: this.state.y }}
             onMouseDown={this.dragMouseDown}
             ref={this.reff}
          >
            <div>
              <p>menu</p>
            </div>
          </a>
      </div>
    );
  }
}

Answer 1

至少在您的小提琴中，您将初始位置设置为

position: fixed;
left: 95rem;
top: 39rem;

导致位置固定（可能在小屏幕上看不到）

当您拖放此项目时，您正在更新这些值。

在调整页面大小时，值保持不变，即与左侧的距离和与顶部的距离。 （rem 与 viewport-/screen-width 或 -height 无关）

关于其他定位问题： 如果你能说出你想要的行为是什么，那么你可能会更接近你正在寻找的东西。您可以尝试设置和更新right 而不是left，就像这里https://jsfiddle.net/61z7wkus/1/

拖放有效，但仅适用于鼠标事件，因为 onmousedown 不处理触摸事件。

fyi：触摸屏设备上的 onmousedown 等效项是 ontouchstart， onmouseup 的等价物是 ontouchend。来源：https://developer.mozilla.org/de/docs/Web/API/TouchEvent

也许您在一个设备检查器中，有触摸事件？ 你有没有听从@moosa-saadat 的建议，在检查器中禁用触摸？

您可能在 chrome 开发工具中启用了触控功能。我禁用了我的触摸，您的代码运行良好。要了解如何在开发工具中关闭触控，请参阅此问题

别忘了检查浏览器的兼容性！ （这就是为什么会有react-dnd这样的东西）

Answer 2

您使用left: 95rem, top: 39rem 定位您的 div。在较小的屏幕上，这会将元素置于视口之外。尝试改用百分比或viewport units。

#more_options_button {
    left: 95vw;
    top: 39vh;
}

Answer 3

1. 如@Joshua-Minkler 所述更改定位
2. 针对以下问题：

它仍然无法解决我在大屏幕上检查时无法拖动它的问题

您可能在 chrome 开发工具中启用了触控功能。我在我这边禁用了触摸，您的代码运行良好。要了解如何在开发工具中关闭触控，请参阅 this question