当前位置:首页 > 网页设计 >Javascript >

javascript实现上下移动li元素

发布时间:2017-11-07 09:06:04 作者:佚名 阅读:(354)

在制作网页的时候,有时候会遇到这种需求,就是实现元素的上下移动,接下来吾爱编程就为大家分享一下javascript实现上下移动li元素,需要的朋友可以参考一下:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
body {
    text-align: center;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    border: 1px solid red;
    text-align: left;

}
</style>
<script type="text/javascript">
window.onload = function() {
    var lilist = document.getElementsByTagName('li');
    var licount = lilist.length;

    for (var i = 0; i < licount; i++) {
        var inputlist = lilist[i].getElementsByTagName('input');

        inputlist[0].addEventListener('click', function() {
            up(event);
        });
        inputlist[1].addEventListener('click', function() {
            down(event);
        });
    }
};

function save() {
    var lilist = document.getElementsByTagName('li');
    var result = document.getElementById('result');
    while (result.hasChildNodes()) {
        result.removeChild(result.firstChild);
    }

    for (var i = 0; i < lilist.length; i++) {
        var span = lilist[i].getElementsByTagName('span')[0];
        console.log(span.childNodes[0].nodeValue);
        var p = document.createElement('p');
        p.appendChild(document.createTextNode(span.childNodes[0].nodeValue));
        result.appendChild(p);

    }
}

function up(event) {
    var ul = document.getElementsByTagName('ul')[0];
    var currentli = event.target.parentNode;

    ul.insertBefore(currentli, currentli.previousElementSibling);
}
function down(event) {
    var ul = document.getElementsByTagName('ul')[0];
    var currentli = event.target.parentNode;

    if (currentli.nextElementSibling != null) {
        ul.insertBefore(currentli.nextElementSibling, currentli);
    }
}

</script>
<body>
<div id="wrapper">
    <ul data-appid="kevin-appid">
        <li class="li1"><span>1</span><input type="button" value="上移1"><input type="button" value="下移1"></li>
        <li class="li2"><span>2</span><input type="button" value="上移2"><input type="button" value="下移2"></li>
        <li class="li3"><span>3</span><input type="button" value="上移3"><input type="button" value="下移3"></li>
        <li class="li4"><span>4</span><input type="button" value="上移4"><input type="button" value="下移4"></li>
        <li class="li5"><span>5</span><input type="button" value="上移5"><input type="button" value="下移5"></li>
    </ul>
    <button id="save" onclick="save()">view</button>
    <div id="result">

    </div>
</div>
</body>
</html>

欢迎分享转载→ javascript实现上下移动li元素

© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们