在前端开发中，我们经常需要实现列表的拖拽功能，这时候就可以使用 react-drag-listview 这个 npm 包来帮助我们实现。
安装
使用 npm 命令安装 react-drag-listview：
npm install react-drag-listview
使用
引入 react-drag-listview：
import ReactDragListView from 'react-drag-listview';
然后在组件内部使用：
<ReactDragListView {...props}>
{/* 渲染你的列表组件 */}
</ReactDragListView>props
react-drag-listview 支持以下 props：
onDragEnd（required）: 拖拽结束后的回调函数。接收一个参数，参数是一个对象，包含draggingIndex（被拖拽的元素的索引） 和hoverIndex（被拖拽的元素最终落下的地方的索引） 两个属性。handleSelector: 用于指定拖拽的操作元素。默认是'li'，即<li></li>元素。lineClassName: 用于指定辅助线的样式类名。默认是'dragging-line'。onDragStart: 拖拽开始时的回调函数。onDragUpdate: 拖拽过程中的回调函数。
示例
以下是一个例子，展示了如何使用 react-drag-listview 来实现列表拖拽功能：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------- ---- ----------------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --------- --------- ------ ------ -----------
--
-
--------- - -- ---------- ------- -- -- -
----- - ---- - - -----------
----- ---- - ---------------------- ------
-------------------- -- ------
--------------- ---- ---
--
---------- - ------ ------ -- -
------ -
---- ------------
------ - --- ------
------
--
--
-------- -
----- - ---- - - -----------
------ -
------------------
--------------------------
--------------------
----------------------
-------------------------
-
---------------------------
--------------------
--
-
-结语
使用 react-drag-listview 可以轻松实现列表的拖拽功能，为我们的前端开发工作提供了便利。希望这篇文章对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaac1b5cbfe1ea0610582