交換兩個元素的位置，將元素上移或下移

項目中需要的一個功能，簡化成兩個小的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)
            }
        })