如何用React实现一个支持长尾词的拖拽功能组件？

本文共计1305个文字，预计阅读时间需要6分钟。

本文介绍了React实现拖拽功能的示例代码，分享给家人，内容如下：

+ 实现效果： + 使用React实现拖拽功能。 + 可以拖动元素到指定位置。

+ 使用场景： + 因为工作中会用到JIRA，所以想实现类似功能。 + 方便学习H5的拖拽。

+ 不支持： + 拖拽顺序改变。 + 感觉。

本文介绍了React 实现拖拽功能的示例代码，分享给大家，具体如下：

实现效果：

因为工作中会用到 JIRA 所以想实现一下相似的功能，顺便学习一下 H5 的拖拽。不支持拖拽改变顺序，感觉有点麻烦，而且没必要。感觉相关的博文好少的，大部分都是直接上代码，没有解释。

图片默认可以拖动，其他元素的拖动效果同图片。正常的 div 是不能被拖动的，鼠标点击选择后移动没有效果，需要加draggable="true"使得元素可以被拖动。

拖拽相关的几个事件，有被拖动元素的事件，也有拖动进入的容器元素的事件。

被拖拽元素的事件：ondragstart，ondragend

放置元素的事件：ondragenter、ondragover、ondragleave、ondrop

顾名思义，不需要解释。