在前端开发中，我们经常需要使用拖拽列表，以及实现平滑的拖拽效果。为了方便开发者使用，很多第三方库也应运而生。其中，npm 包 react-smooth-draggable-list 是一个非常优秀的库，它提供了简化拖拽列表实现的解决方案。这篇文章将会介绍如何使用 react-smooth-draggable-list 库，让你快速实现拖拽列表。
安装
你可以使用 npm 或者 yarn 安装 react-smooth-draggable-list。在终端中执行以下命令即可：
npm install react-smooth-draggable-list # 或者 yarn add react-smooth-draggable-list
使用
添加元素
首先，为了展示拖拽列表的效果，我们需要添加一些元素。请先创建一个数组，以用来展示拖拽列表。
const items = [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
{ id: 4, text: 'Item 4' },
{ id: 5, text: 'Item 5' },
];渲染 Drag & Drop 列表
接下来，在 render() 方法中添加以下代码来渲染拖拽列表。其中，DraggableList 是 react-smooth-draggable-list 提供的组件。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------- ---- ------------------------------
-------- ----- -
----- ------- --------- - ----------
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
---
----- ---------- - --------- -- -
------------------
--
------ -
--------------
------------
-------------------------
------------
-------------------- -- -----------------------
--
--
-
------ ------- ----上面代码中的 handleDrag 函数用于当元素在列表中拖拽时更新列表元素。list 是列表的初始状态，onListChange 是当元素拖拽位置发生变化时所触发的函数，height 用来设置列表的高度，itemRenderer 用来定义列表渲染的元素。
自定义样式
你可以通过给 DraggableList 组件传递 style 和 className 来对列表元素进行样式定制。
<DraggableList
list={items}
onListChange={handleDrag}
height={500}
itemRenderer={(item) => <div>{item.text}</div>}
style={{ backgroundColor: "#F5F5F5" }}
className="my-draggable-list"
/>上面代码中，style 用于设置 Drag & Drop 列表的背景颜色，className 则设置了一个名称为 my-draggable-list 的类名，用于自定义样式。
元素拖拽控制
除了上面提到的基本使用方法以外，react-smooth-draggable-list 还提供了其他功能，以增强列表的拖拽控制能力。
限制元素拖拽
你可以通过传递 canDrag 选项来限制元素的拖拽。以下示例中，第 4 个元素是不能拖拽的。
-- -------------------- ---- ------- ----- ----- - - - --- -- ----- ----- -- -- - --- -- ----- ----- -- -- - --- -- ----- ----- -- -- - --- -- ----- ----- --- -------- ----- -- - --- -- ----- ----- -- -- -- -------------- ------------ ------------------------- ------------ -------------------- -- ----------------------- --------------- -- ------------ --- ------ --
结语
以上就是本篇文章介绍的 react-smooth-draggable-list 的使用方法，我们一起完成了拖拽列表的实现。希望本篇文章能对你有所帮助，也希望你可以通过本篇文章了解到更多前端技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572cd81e8991b448e8fea