交换两个元素的位置，将元素上移或下移

项目中需要的一个功能，简化成两个小的demo，每个都有js和jq两个版本

1.交换两个元素的所在位置

点击转换更换两个元素的位置，html略过，直接上js版代码

 var btn = document.querySelector('.btn')
        function insertEle(ele,targetEle){//将某元素插到targetEle元素前
            targetEle.insertAdjacentElement('beforeBegin',ele)
        }
        function changePos(id1,id2){//交换两个元素的位置必须为相邻元素,id分别为要交换元素的id
            var ele1 = document.querySelector('#'+id1);
            var ele2 = document.querySelector('#'+id2);
            var medium = document.createElement('a');  //中间元素   参考交换两个变量的值的方法引入中间元素
            insertEle(medium,ele2);　　　　　　　　　　　　// 将中介元素插到元素2前
            insertEle(ele2,ele1);　　　　　　　　　　　　　//　将元素2插到元素1前
            insertEle(ele1,medium);　　　　　　　　　　　　//　将元素1插到中介元素前　
            document.body.removeChild(medium)         //删除中介元素
        }
        btn.onclick = function(){                   //点击调用 函数
            changePos('a','b')
        }

jq版会简洁很多

 function change(id1,id2){
            var medium = document.createElement('a');   //思路一样引入中间元素
            $('#'+id2).after(medium)
            $('#'+id1).after($('#'+id2))
            $(medium).after($('#'+id1))
            $(medium).remove()
        }
        $('.btn').click(function(){
            change('a','b')
        })

先点击要移动的元素，然后在点击上移或者下移

js版代码

 var id
        var box = document.querySelector('.box').children
        console.log(box)
        for(let  i =0;i<box.length;i++){
                // box[i].onclick = ()=>{                //给每个元素添加点击事件，点击切换id，也就是要移动的元素，但这种写法有一个bug我简单描述一下
                //     id = box[i];                      //这样循环后box[0] click后 id = box[0]，看似没问题，但box内的元素顺序在元素移动后会改变，而循环只执行这一次
                //     console.log(id);                  //也就是说  最初的第一个元素点击后 id总等于最新的box[0]
                //     console.log(i);
                // }
                box[i].onclick = function(){
                    id = this
                }
        }
        var up = document.querySelector('.up')
        var down = document.querySelector('.down')
        up.onclick = ()=>{
            console.log(id)
            console.log(id.previousElementSibling,'前兄弟元素')  //上移就找对应元素之前的兄弟元素，把他插到兄弟元素之前
            try{
                var preEle = id.previousElementSibling
                insertEle(id,preEle)                           //这个还是最上面使用的将元素插到对应元素前的函数
            }
            catch(err){
                console.log(err)
            }
        }
        down.onclick = ()=>{
            console.log(id.nextElementSibling,'后兄弟元素')       //下移就找对应元素后面的兄弟元素，把后面元素前提
            try{
                var nextEle = id.nextElementSibling               
                insertEle(nextEle,id)                           
            }                                                      
            catch(err){
                console.log(err)
            }
        }

Jq版本也比较简单   思路和js版一样

 var id
        $('.box>div').click(function(){   
            id = this
        })
        $('.up').click(()=>{
            try{
                $(id).prev().before($(id))
            }
            catch(err){
                console.log(err)
            }
        })
        $('.down').click(()=>{
            try{
                $(id).next().after($(id))
            }
            catch(err){
                console.log(err)
            }
        })