js 實現列表上下移動排序
阿新 • • 發佈：2019-01-30
<!DOCTYPE html>
<html>
<head>
<title>列表值上下排序 Demo</title>
<link rel="stylesheet" type="text/css" href="framework/easyui1.5.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="framework/easyui1.5.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="framework/easyui1.5.3/demo/demo.css">
<script type="text/javascript" src="framework/easyui1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="framework/easyui1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="framework/easyui1.5.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="framework/easyui1.5.3/src/jquery.tabs.js"></script>
<style>
.listItem {
margin: 0px;
padding: 0px;
background-color: #FFF3F3;
list-style: none;
text-align: center;
width: 200px;
overflow: auto;
height: 200px;
}
.listItem>li {
font-size: 20px;
line-height: 20px;
border: 1px solid palegoldenrod;
}
</style>
</head>
<body>
<ul class="listItem" id="product">
<li value="0">AAAAA</li>
<li value="1">BBBB</li>
<li value="2">CCC</li>
<li value="3">DDD</li>
<li value="4">EEEEE</li>
<li value="5">FFFFFF</li>
<li value="6">GGGGG</li>
<li value="7">HHHH</li>
<li value="8">IIIII</li>
<li value="9">J</li>
<li value="10">K</li>
<li value="11">L</li>
<li value="12">M</li>
<li value="13">N</li>
<li value="14">O</li>
<li value="15">P</li>
<li value="16">Q</li>
<li value="17">R</li>
<li value="18">S</li>
<li value="19">T</li>
<li value="20">U</li>
</ul>
<input type='button' value='UP' onclick="movetool.up()">
<input type='button' value='DOWN' onclick="movetool.down()">
<input type='button' value='TOP' onclick="movetool.topA()">
<input type='button' value='BOTTOM' onclick="movetool.bottomZ()">
<input type='button' value='RESULT' onclick="movetool.getSequence()">
<script>
$("li").click(function() {
$("li").css("background-color", "#FFF3F3");
$(this).css("background-color", "#00FFFF");
movetool.selectItem = $(this);
});
var movetool = {
itemId: "#product",
selectItem: undefined,
topA: function() {
console.info(this.selectItem)
if(this.selectItem) {
this.selectItem.insertBefore(this.selectItem.prevAll().last());
}
},
up: function() {
if(this.selectItem) {
this.selectItem.insertBefore(this.selectItem.prev());
}
},
down: function() {
if(this.selectItem) {
this.selectItem.insertAfter(this.selectItem.next());
}
},
bottomZ: function() {
if(this.selectItem) {
this.selectItem.insertAfter(this.selectItem.nextAll().last());
}
},
getSequence: function() {
var sortArray = new Array();
$(this.itemId + ">li").each(function(i) {
sortArray.push($(this).val());
});
alert("排序結果:"+
sortArray.join(","));
console.info(sortArray.join(","));
}
};
</script>
</body>
</html>
<html>
<head>
<title>列表值上下排序 Demo</title>
<link rel="stylesheet" type="text/css" href="framework/easyui1.5.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="framework/easyui1.5.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="framework/easyui1.5.3/demo/demo.css">
<script type="text/javascript" src="framework/easyui1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="framework/easyui1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="framework/easyui1.5.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="framework/easyui1.5.3/src/jquery.tabs.js"></script>
<style>
.listItem {
margin: 0px;
padding: 0px;
background-color: #FFF3F3;
list-style: none;
text-align: center;
width: 200px;
overflow: auto;
height: 200px;
}
.listItem>li {
font-size: 20px;
line-height: 20px;
border: 1px solid palegoldenrod;
}
</style>
</head>
<body>
<ul class="listItem" id="product">
<li value="0">AAAAA</li>
<li value="1">BBBB</li>
<li value="2">CCC</li>
<li value="3">DDD</li>
<li value="4">EEEEE</li>
<li value="5">FFFFFF</li>
<li value="6">GGGGG</li>
<li value="7">HHHH</li>
<li value="8">IIIII</li>
<li value="9">J</li>
<li value="10">K</li>
<li value="11">L</li>
<li value="12">M</li>
<li value="13">N</li>
<li value="14">O</li>
<li value="15">P</li>
<li value="16">Q</li>
<li value="17">R</li>
<li value="18">S</li>
<li value="19">T</li>
<li value="20">U</li>
</ul>
<input type='button' value='UP' onclick="movetool.up()">
<input type='button' value='DOWN' onclick="movetool.down()">
<input type='button' value='TOP' onclick="movetool.topA()">
<input type='button' value='BOTTOM' onclick="movetool.bottomZ()">
<input type='button' value='RESULT' onclick="movetool.getSequence()">
<script>
$("li").click(function() {
$("li").css("background-color", "#FFF3F3");
$(this).css("background-color", "#00FFFF");
movetool.selectItem = $(this);
});
var movetool = {
itemId: "#product",
selectItem: undefined,
topA: function() {
console.info(this.selectItem)
if(this.selectItem) {
this.selectItem.insertBefore(this.selectItem.prevAll().last());
}
},
up: function() {
if(this.selectItem) {
this.selectItem.insertBefore(this.selectItem.prev());
}
},
down: function() {
if(this.selectItem) {
this.selectItem.insertAfter(this.selectItem.next());
}
},
bottomZ: function() {
if(this.selectItem) {
this.selectItem.insertAfter(this.selectItem.nextAll().last());
}
},
getSequence: function() {
var sortArray = new Array();
$(this.itemId + ">li").each(function(i) {
sortArray.push($(this).val());
});
alert("排序結果:"+
sortArray.join(","));
console.info(sortArray.join(","));
}
};
</script>
</body>
</html>