上移下移标准版 【总结】

需求


上移下移
需求:
1)点击上移就将当前的按钮的父级上移一位

2)当点击第一个时候将当前按钮的父级移动到最后一位

3)当点击最后一个时候将当前按钮的父级移动到首位

需求分析:

下移:剪切所点击的条目插入到下一条目后面

上移:剪切所点击的条目插入到上一条目前面

实现思路:

总得就是【获取】 -->  【插入】这两个动作,

获取:

扫描二维码关注公众号,回复: 2864473 查看本文章

  需要用到priviousSibling和nextSibling两个方法来获取前面的兄弟节点和后面的兄弟节点

插入:

  上移用到在一个元素之前插入,可以用HTMLDOM方法的insertBefore实现,

  下移没有原生的insertAfter,但可以自己写一个

难点:

包装一个获取兄弟节点的函数

写一个insertAfter函数

难点解决方案:

花费时间多一点,但还是写的出来

涉及的新知识:

element.priviousSibling

element.nextSibling

element.parentNode

element.nodeType

parentNode.insertBefore( newEle , targetEle );

优化方向:

暂无

备注:

 无

猜你喜欢

转载自www.cnblogs.com/mflnhg/p/9503263.html