javascript - 如何使用 React 使 blueprintJs 对话框可拖动?

标签 javascript reactjs draggable blueprint react-big-calendar

我有一个react-big-calendar和一个创建按钮,当我点击它时,我会打开一个蓝图对话框,我希望它可以拖动到任何地方。

我的对话框是: enter image description here

我的代码是:

https://codesandbox.io/s/sharp-shockley-tt9bc

如何使其可拖动?

最佳答案

你需要做的是: 1. 使Dialog的div可拖动为 2. 在同一个div上应用onDrag事件,并传递一个函数,该函数将执行以下操作:

handleDragEvent = (event) => {
    this.setState({
        positionX: event.clientX,
        positionY: event.clientY,
    })
}

然后您需要将这些坐标作为对话的起始位置。您可能需要根据您的需要对上述功能进行一些修改。

关于javascript - 如何使用 React 使 blueprintJs 对话框可拖动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58389645/

相关文章:

javascript - 如何使用下面的 JQuery 代码显示元素?

javascript - 矩阵图 : unable to style rotated column names

javascript - native react "attempt to set value to an immutable object"

javascript - React - 无法使用带有 GitHub API 的 Axios 设置状态

html - 使 div 对某些元素可拖放

javascript - jQueryUI Draggable Helper 选项帮助

javascript - 在 javascript 中将新成员显示到 html 显示列表

javascript - 三个 JS - 执行旋转后 BoundingBox 未更新

javascript - JS获取动态网格中按钮的值

javascript - 如何在 EXTJS 中将图像拖放到其容器之外