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

JavaScript

LLEY

2020-03-12

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

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

谢谢。

第1300篇《推荐的使React组件/ div可拖动的方式》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
凯梅小胖 2020.03.12

我想添加第三个场景

不会以任何方式保存移动位置。将其视为鼠标移动-您的光标不是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操作是一件很优雅的事情（我从没想过要这么说）

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android