Javascript 单击时更改列表项的位置

关于什么算法可以解决以下问题？我需要在点击一个菜单区块时接收到的类激活并在中间站起来。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="active">4</li>
    <li>5</li>
</ul>

ul li {
    float: left;
    list-style: none;
    background: red;
    margin-left: 20px;
    display: block;
    padding: 20px;
}

.active {
    background: orange;
}

一,
二,
三,
4
五,

ulli{
浮动：左；
列表样式：无；
背景：红色；
左边距：20px；
显示：块；
填充：20px；
}
.主动{
背景：橙色；
}

---

要添加活动类，请执行以下操作

var liElems = document.getElementsByTagName('li'), mid = Math.floor(liElems.length/2);
Array.prototype.forEach.call(liElems, function (item, idx) {
    item.idx = idx;
    item.onclick = function () {
        document.querySelector('li.active').classList.remove('active');
        this.classList.add('active');
    };
});

演示：

---

var liElems=document.getElementsByTagName（'li'），
长度=liElems.length，
mid=数学楼层（liElems.length/2）；
Array.prototype.forEach.call（liElems，函数（item，idx）{
item.idx=idx；
item.onclick=函数（）{
document.querySelector（'li.active'）.classList.remove（'active'）；
this.classList.add（'active'）；
if（liElems[mid].idx！=mid）{
if（liElems[mid].idx==长度-1）{
this.parentNode.appendChild（liElems[mid]）
}否则{
this.parentNode.insertBefore（liElems[mid]，liElems[liElems[mid].idx]）
}
}
var pos=mid

---

演示：

其中一个元素您要做的是。。。复制ul的html，编辑html，然后按照您想要的方式将其附加回去。

var liElems = document.getElementsByTagName('li'),
    length = liElems.length,
    mid = Math.floor(liElems.length / 2);
Array.prototype.forEach.call(liElems, function (item, idx) {
    item.idx = idx;
    item.onclick = function () {
        document.querySelector('li.active').classList.remove('active');
        this.classList.add('active');


        if (liElems[mid].idx != mid) {
            if (liElems[mid].idx == length - 1) {
                this.parentNode.appendChild(liElems[mid])
            } else {
                this.parentNode.insertBefore(liElems[mid], liElems[liElems[mid].idx])
            }
        }

        var pos = mid < this.idx ? mid : mid + 1;
        this.parentNode.insertBefore(this, liElems[pos])

    };
});