当前位置:首页 > 网页设计 >Javascript >
发布时间:2017-11-07 09:06:04 作者:佚名 阅读:(354)
<!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关于我们 - 网站声明 - 联系我们