div上下循环移动

最新推荐文章于 2022-02-15 17:57:02 发布

稳稳DE幸福

最新推荐文章于 2022-02-15 17:57:02 发布

阅读量1.3k

点赞数

文章标签： JS

本文链接：https://blog.csdn.net/gouhuarong/article/details/52004374

版权

(function() {
    //向下移动
    var divContainer = document.getElementById('container');
    var listOfDiv = divContainer.getElementsByTagName('div');
    for(var i = 0; i < listOfDiv.length; ++i) {
        listOfDiv[i].currentIndex = i;
        var downBtn = document.createElement('button');
        downBtn.className = 'btn down';
        downBtn.innerHTML = '向下移动';
        downBtn.onclick = function() {
            var div = this.parentNode;
            var index = div.currentIndex;
            // 如果当前div已经是最后一个div，那么就把这个div放到所有div的开头
            if(index === listOfDiv.length - 1) {
                // 找到第一个div
                var firstDiv = listOfDiv[0];
                div.parentNode.insertBefore(div, firstDiv);
                // 把移动到开头的div的currentIndex设置为0
                div.currentIndex = 0;
                // 把除了开头以外的每个div，它的currentIndex属性都加1
                for(var u = 1; u < listOfDiv.length; ++u) {
                    listOfDiv[u].currentIndex = listOfDiv[u].currentIndex + 1;
                }
            } else {
                // 找到这个div的下一个div
                var nextDiv = div.parentNode.children[index + 1];
                div.parentNode.insertBefore(div, div.parentNode.children[index + 2]);
                div.currentIndex = index + 1;
                // 将下一个div的currentIndex属性也修改为正确的
                nextDiv.currentIndex = index;
            }
        };
        listOfDiv[i].appendChild(downBtn);
    }
    //向上移动
    for(var j = 0; j < listOfDiv.length; j++){
        listOfDiv[j].currentIndex = j;
        var upBtn = document.createElement('button');
        upBtn.className = 'btn up';
        upBtn.innerHTML = '向上移动';
        upBtn.onclick = function() {
            var div = this.parentNode;
            var index = div.currentIndex;
            // 如果当前div已经是最后一个div，那么就把这个div放到所有div的开头
            if(index === 0) {
                // 找到最后一个div
                var lastDiv = listOfDiv[listOfDiv.length];
                div.parentNode.insertBefore(div, lastDiv);
                // 把移动到开头的div的currentIndex设置为0
                div.currentIndex = listOfDiv.length - 1;
                // 把除了开头以外的每个div，它的currentIndex属性都加1
                for(var u = listOfDiv.length - 2; u >= 0; u--) {
                    listOfDiv[u].currentIndex = listOfDiv[u].currentIndex - 1;
                }
            } else {
                // 找到这个div的下一个div
                var nextDiv = div.parentNode.children[index - 1];
                div.parentNode.insertBefore(div, div.parentNode.children[index - 1]);
                div.currentIndex = index - 1;
                // 将下一个div的currentIndex属性也修改为正确的
                nextDiv.currentIndex = index;
            }
        };
        listOfDiv[j].appendChild(upBtn);
    }
})();