在前端开发中,很多时候需要对页面上的列表进行操作,比如对其中的数据进行排序。其中一种常用的方式是通过上移或下移某个列表项来改变其在列表中的位置。本文将介绍如何使用JavaScript实现这种功能。
实现思路
实现该功能的核心思路是:根据点击的方向(上移还是下移),获取当前选中的列表项以及它在列表中的位置,并将其与相邻的列表项进行交换位置。下面是详细的实现步骤:
- 添加点击事件监听器:我们需要给每个列表项都添加一个点击事件监听器,当用户点击该项时,触发相应的操作。
--- --------- - -------------------------------- ---------------------- -- - ------------------------------ ------------- ---
- 编写handleClick函数:该函数会获取当前被点击的列表项以及它的位置。然后,根据用户点击的按钮(上移或下移),计算出需要交换的两个列表项的位置,并将它们的innerHTML值互换。
-------- ------------------ - --- ----------- - ------------- --- -------- - -------------------------- --- --------- - ------------------------------- --- --------------- - ----------------------------------------------------------- -- ---------- --- ---- -- --------------- - -- - --- ------------ - -------------------------------- ------------------------------------------ -------------- - ---- -- ---------- --- ------ -- --------------- - ---------------- - -- - --- -------- - ---------------------------- ------------------------------------------ ---------- - -
- 添加上移下移按钮:我们需要在每个列表项中都添加两个按钮,用来触发上移和下移操作。这里使用data-direction属性来标识点击的方向。
---- --------------- -------------------------------------- -------------------------------------- --------------- -------------------------------------- -------------------------------------- --------------- -------------------------------------- -------------------------------------- -----
示例代码
下面是一个完整的示例代码,可以复制到本地运行查看效果:
--------- ----- ----- ---------- ------ ----- ---------------- --------------------------------- ------- -- - ------- ----- -------- ----- ----------------- -------- ------- --- ----- ----- - -------- ------- ------ ---- --------------- -------------------------------------- -------------------------------------- --------------- -------------------------------------- -------------------------------------- --------------- -------------------------------------- -------------------------------------- ----- -------- --- --------- - -------------------------------- ---------------------- -- - ------------------------------ ------------- --- -------- ------------------ - --- ----------- - ------------- --- -------- - -------------------------- --- --------- - ------------------------------- --- --------------- - ----------------------------------------------------------- -- ---------- --- ---- -- --------------- - -- - --- ------------ - -------------------------------- ------------------------------------------ -------------- - ---- -- ---------- --- ------ -- --------------- - ---------------- - -- - --- -------- - ---------------------------- ------------------------------------------ ---------- - - --------- ------- -------
总结
使用JavaScript实现点击上移下移LI行数据的方法很简
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/3938