练习案例_移动列表项

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <style type="text/css">
        .left-div{
            width: 185px;
            height: 300px;
            border: 1px solid lightgray;
            float: left;
        }
        .middle-div{
            width: 60px;
            height: 300px;
            float: left;
            text-align: center;
        }
        .middle-div button{
            margin-top: 30px;
        }
        .right-div{
            width: 185px;
            height: 300px;
            border: 1px solid lightgray;
            float: left;
        }
        #moveDiv p{
            margin:2px;
            padding: 0;

        }

        .selected{
            background-color: blue;
        }
    </style>
    <script type="text/javascript">

        window.onload=function(){


            var moveDiv = document.getElementById("moveDiv");

            var leftDiv = document.getElementById("leftDiv");

            var rightDiv = document.getElementById("rightDiv");


            var pElements = moveDiv.getElementsByTagName("p");
            for(var i=0;i<pElements.length;i++){

                var pElement = pElements.item(i);

                //1 鼠标经过列表项，背景色改变成浅灰色
                pElement.onmouseover=function(){
                    this.style.backgroundColor="lightgray";
                }

                pElement.onmouseout=function(){
                    this.style.backgroundColor=null;
                }

                //2 鼠标单击列表项后，列表项变成选中状态（class=selected）,再次点击后，取消选中状态
                pElement.onclick=function(){
                    if(this.className=="selected"){
                        this.className=null;
                    }else{
                        this.className="selected";
                    }
                }

                //3 双击列表项的时候，把列表项移动到另外一个div里面
                pElement.ondblclick=function(){

                    if(this.parentNode==leftDiv){
                        rightDiv.appendChild(this);
                    }else{
                        leftDiv.appendChild(this);
                    }

                }
            }

            //4 点击 >> 按钮，把左边div被选中的列表项移动到右边，同时取消被选中状态
            var moveBtn = document.getElementById("moveBtn");
            moveBtn.onclick=function(){

                var pElements =  leftDiv.getElementsByTagName("p");
                for(var i=0;i<pElements.length;i++){
                    var pElement = pElements.item(i);
                    if(pElement.className=="selected"){
                        rightDiv.appendChild(pElement);
                        pElement.className=null;
                        i--;
                    }

                }

            }

            //5  <<
            var backBtn = document.getElementById("backBtn");
            backBtn.onclick=function(){

                var pElements =  rightDiv.getElementsByTagName("p");
                for(var i=0;i<pElements.length;i++){
                    var pElement = pElements.item(i);
                    if(pElement.className=="selected"){
                        leftDiv.appendChild(pElement);
                        pElement.className=null;
                        i--;
                    }

                }

            }

            //6 >>>
            var moveAllBtn = document.getElementById("moveAllBtn");
            moveAllBtn.onclick=function(){
                var pElements =  leftDiv.getElementsByTagName("p");
                while(pElements.length>0){
                    var pElement = pElements.item(0);
                    rightDiv.appendChild(pElement)
                    pElement.className=null;
                }
            }

            // <<<
            var backAllBtn = document.getElementById("backAllBtn");
            backAllBtn.onclick=function(){
                var pElements =  rightDiv.getElementsByTagName("p");
                while(pElements.length>0){
                    var pElement = pElements.item(0);
                    leftDiv.appendChild(pElement)
                    pElement.className=null;
                }
            }
        }

    </script>
</head>
<body>
<div id="moveDiv">
    <div id="leftDiv" class="left-div">
        <p>蛋蛋</p>
        <p>建国</p>
        <p>赖宝</p>
        <p>浇水</p>
    </div>
    <div id="middleDiv" class="middle-div">
        <button id="moveBtn"> &gt;&gt; </button>
        <button id="moveAllBtn"> &gt;&gt;&gt; </button>
        <button id="backBtn"> &lt;&lt; </button>
        <button id="backAllBtn"> &lt;&lt;&lt; </button>
    </div>
    <div id="rightDiv" class="right-div"></div>
    <div style="clear: both"></div>
</div>
</body>
</html>
posted @ 2016-06-22 07:51 linyongqin 阅读(139) 评论(0) 收藏举报
刷新页面返回顶部
linyongqin

练习案例_移动列表项

公告
