react-draggable 鼠标松开后元素仍然跟随鼠标移动

如果在使用 react-draggable 的过程中鼠标松开后元素仍然跟随鼠标移动，可能是因为没有正确地清除事件监听器。你可以在组件卸载时手动清除事件监听器，例如在 componentWillUnmount() 方法中使用 removeEventListener() 方法。另外，你也可以尝试使用 onMouseUpCapture 事件来监听鼠标松开事件，它会在所有子元素的 onMouseUp 事件之前触发，确保事件的正确执行顺序。

相关问题

react-draggable 拖拽时会触发子元素点击事件

`react-draggable` 是一个非常好用的拖拽库，但是在拖拽过程中会触发子元素的点击事件，这是因为默认情况下 `react-draggable` 使用的是绝对定位，导致其覆盖了子元素，从而阻止了子元素的点击事件冒泡到父元素。

解决这个问题的方法是给 `react-draggable` 的 `handle` 属性设置一个值，这个值应该是可以响应点击事件的元素。例如，可以将 `handle` 属性设置为一个 `div` 元素，这个 `div` 元素用来触发拖拽事件，而其它子元素则不会触发拖拽事件。

下面是一个简单的示例代码：

import React from 'react';
import Draggable from 'react-draggable';

const Example = () => {
  const handleDrag = () => {
    console.log('dragging...');
  };

  return (
    <Draggable handle=".handle" onDrag={handleDrag}>
      <div className="box">
        <div className="handle">拖拽我</div>
        <div className="content">我不会触发拖拽事件</div>
      </div>
    </Draggable>
  );
};

在上面的代码中，我们给 `Draggable` 组件的 `handle` 属性设置了值为 `.handle`，这意味着只有拖拽 `.handle` 元素时才会触发拖拽事件。`.content` 元素不会触发拖拽事件。这样就可以避免在拖拽过程中触发子元素的点击事件了。

react-draggable-tags

react-draggable-tags是一个基于React的可拖拽标签组件库。它提供了一种简单的方式来创建可拖拽的标签，可以用于实现标签选择、标签排序等功能。

该组件库具有以下特点：
1. 可自定义标签样式：你可以通过CSS来自定义标签的外观，包括颜色、大小、边框等。
2. 可拖拽排序：你可以通过拖拽标签来改变它们的顺序，从而实现标签的排序功能。
3. 可添加/删除标签：你可以通过添加/删除标签的方式来动态修改标签列表。
4. 事件回调：该组件库提供了一些事件回调函数，如拖拽开始、拖拽结束等，方便你在相应的事件发生时执行自定义逻辑。

使用react-draggable-tags，你需要先安装该组件库，并在你的React项目中引入相应的组件。然后，你可以根据需要配置标签列表和相应的事件回调函数，以实现你想要的功能。