div上下循环移动

来源：互联网发布：java reentrantlock 编辑：程序博客网时间：2024/05/19 10:36
(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);    }})();
0 0