推荐的使React组件/ div可拖动的方式

我想制作一个可拖动(即可以通过鼠标重定位)的React组件,该组件似乎必然涉及全局状态和分散的事件处理程序。我可以在JS文件中使用一个全局变量来以肮脏的方式进行操作,甚至可以将其包装在一个不错的闭包接口中,但是我想知道是否有一种方法可以更好地与React结合。

另外,由于我以前从未在原始JavaScript中完成过此操作,所以我想看看专家是如何做到的,以确保我处理了所有极端情况,尤其是与React相关的情况。

谢谢。

凯梅小胖2020/03/12 20:12:28

我想添加第三个场景

不会以任何方式保存移动位置。将其视为鼠标移动-您的光标不是React组件,对吗?

您要做的就是在组件中添加诸如“可拖动”之类的道具,以及将操纵dom的一系列拖动事件。

setXandY: function(event) {
    // DOM Manipulation of x and y on your node
},

componentDidMount: function() {
    if(this.props.draggable) {
        var node = this.getDOMNode();
        dragStream(node).onValue(this.setXandY);  //baconjs stream
    };
},

在这种情况下,DOM操作是一件很优雅的事情(我从没想过要这么说)