js实现div之间的移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DIV层上下移动交换位置</title>
    <style type="text/css">
        ul {
            width: 1000px
        }

        li {
            border: 1px solid gray;
            list-style: none
        }

        .txt {
            padding: 4px;
            background-color: #ffffff
        }
    </style>
    <script language="javascript" type="text/javascript">
        window.onload = function () {
            ggGroup(document.getElementById('test'), 5);
        };

        function ggGroup(ele, margin) {
            margin = margin || 0;
            var bgcolors = '#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(',');
            var txtUp = '上移↑&nbsp;', txtDown = '下移↓';
            var panels = children(ele);
            for (var i = 0, h = 50; i < panels.length; i++) {
                var p = panels[i];
                p.style.position = 'absolute';
                p.style.width = '100%';
                var b = document.createElement('div');
                with (b.style) {
                    fontSize = '12px';
                    padding = '4px';
                    backgroundColor = bgcolors[i % bgcolors.length];
                    textAlign = 'right';
                }
                b.innerHTML = '<span>' + txtUp + '</span><span>' + txtDown + '</span>';
                b.firstChild.onclick = moveup;
                b.firstChild.style.cursor = 'pointer';
                b.lastChild.onclick = movedown;
                b.lastChild.style.cursor = 'pointer';
                p.insertBefore(b, p.firstChild);
                p.style.top = h + 'px';
                p.index = i;
                h += p.offsetHeight + margin;
            }
            ele.style.height = h + 'px';
            ele.style.position = 'relative';
            check(0, i - 1);

            function check() {
                for (var i = 0; i < arguments.length; i++) {
                    var x = arguments[i];
                    var c = panels[x].firstChild.childNodes;
                    c[0].style.visibility = x == 0 ? 'hidden' : 'visible';
                    c[1].style.visibility = x == panels.length - 1 ? 'hidden' : 'visible';
                    panels[x].index = x;
                }
            }

            function moveup(evt) {
                var p = evt ? evt.target : event.srcElement;
                p = p.parentNode.parentNode;
                swap(p, panels[p.index - 1]);
            }

            function movedown(evt) {
                var p = evt ? evt.target : event.srcElement;
                p = p.parentNode.parentNode;
                swap(p, panels[p.index + 1]);
            }

            function swap(p1, p2) {
                var N = 10;
                var INTV = 200;
                var arr1, arr2;
                var t1 = parseInt(p1.style.top), t2 = parseInt(p2.style.top);
                var h1 = p1.offsetHeight + margin, h2 = p2.offsetHeight + margin;
                arr1 = makeArr(t1, t1 < t2 ? h2 : -h2);
                arr2 = makeArr(t2, t1 < t2 ? -h1 : h1);
                for (var i = 0; i < N; i++) (function () {
                    var j = i;
                    setTimeout(function () {
                        p1.style.top = arr1[j] + "px";
                        p2.style.top = arr2[j] + "px";
                        if (j == N - 1) {
                            panels[p1.index] = p2;
                            panels[p2.index] = p1;
                            check(p1.index, p2.index);
                        }
                    }, (j + 1) * INTV / N);
                })();

                function makeArr(f, x) {
                    var ret = [];
                    for (var i = 0; i < N; i++)
                        ret[i] = Math.round(f + i * x / (N - 1));
                    return ret;
                }
            }

            function children(e) {
                var ret = [];
                for (var i = 0, c = e.childNodes; i < c.length; i++)
                    if (c[i].nodeType == 1)
                        ret.push(c[i]);
                return ret;
            }
        }
    </script>
</head>
<body>
<ul id="test">
    <li>
        <div class="txt">
            <img src="/images/banner.gif" width="600px" height="300px"/>
        </div>
    </li>
    <li>
        <div class="txt" style="height: 200px;">
            <i>this is Second div</i>
        </div>
    </li>
    <li>
        <div class="txt" style="height: 200px;">
            这是第三个div
        </div>
    </li>
</ul>
</body>
</html>
js实现div之间的移动

猜你喜欢
