为什么我的 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

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

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

Answer 2

更改@Joshua-Minkler
针对以下问题：

it still doesn't fix my problem where I am not able to drag it when I inspect it on a larger screen

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

Answer 3

至少在你的 fiddle 内，你将初始位置设置为

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

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

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

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

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

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

fyi: The equivalent for onmousedown on touchscreen devices is ontouchstart, and the equivalent of onmouseup is ontouchend. Source: https://developer.mozilla.org/de/docs/Web/API/TouchEvent

也许您在具有触摸事件的设备检查器中？您是否遵循了@moosa-saadat 的建议，在检查器中禁用触摸？

You probably have touch enabled in your chrome dev-tools. I disabled touch on my side and your code worked perfectly. To see how you can turn off touch in your dev-tools, refer to this question

别忘了检查浏览器的兼容性！（所以才有了react-dnd）

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

Why is my div draggable on a smaller screen, but when I inspect it on a larger screen I'm no longer able to drag it?

javascript

css

drag-and-drop

reactjs