<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./toolkit/jQuery-min.js"></script>
<style>
div{
cursor:pointer;
}
</style>
</head>
<body>
<div>
<div class="item" style="background-color: pink; text-align: center">
<div style="display: flex;">
<div class="sort-down">下移</div>
<div class="sort-asc">上移</div>
</div>
<div>内容11111</div>
</div>
<div class="item" style="background-color: burlywood; text-align: center">
<div style="display: flex;">
<div class="sort-down">下移</div>
<div class="sort-asc">上移</div>
</div>
<div>内容22222</div>
</div>
<div class="item" style="background-color: yellow; text-align: center;">
<div style="display: flex;">
<div class="sort-down">下移</div>
<div class="sort-asc">上移</div>
</div>
<div>内容33333</div>
</div>
</div>
<ul class="demo">
<li>
<span>001</span>
<a href="javascript:void(0)" class="up">上移</a>
<a href="javascript:void(0)" class="down">下移</a>
<a href="javascript:void(0)" class="top">置顶</a>
<a href="javascript:void(0)" class="bottom">置底</a>
</li>
<li>
<span>002</span>
<a href="javascript:void(0)" class="up">上移</a>
<a href="javascript:void(0)" class="down">下移</a>
<a href="javascript:void(0)" class="top">置顶</a>
<a href="javascript:void(0)" class="bottom">置底</a>
</li>
<li>
<span>003</span>
<a href="javascript:void(0)" class="up">上移</a>
<a href="javascript:void(0)" class="down">下移</a>
<a href="javascript:void(0)" class="top">置顶</a>
<a href="javascript:void(0)" class="bottom">置底</a>
</li>
<li>
<span>004</span>
<a href="javascript:void(0)" class="up">上移</a>
<a href="javascript:void(0)" class="down">下移</a>
<a href="javascript:void(0)" class="top">置顶</a>
<a href="javascript:void(0)" class="bottom">置底</a>
</li>
</ul>
</body>
<script>
$(document).on('click', '.sort-down', function () {
//判断是否有下一个节点
if ($(this).parents('.item').nextAll().length > 0) {
$(this).parents('.item').next().after(
$(this).parents('.item').prop('outerHTML'));
$(this).parents('.item').remove();
}
}).on('click', '.sort-asc', function () {
//判断是否有上一个节点
if ($(this).parents('.item').prevAll().length > 0) {
$(this).parents('.item').prev().before(
$(this).parents('.item').prop('outerHTML'));
$(this).parents('.item').remove();
}
})
$(".demo").on('click', 'a', function (event) {
event.preventDefault;
var parent = $(this).parent();
var parents = $(this).parents(".demo");
var len = parents.children().length;
if (($(this).is(".up") || $(this).is(".top")) && parent.index() == 0) {
alert("已经位于最顶端!");
return false;
} else if (($(this).is(".down") || $(this).is(".bottom")) && parent.index() == len - 1) {
alert("已经位于最底端!");
return false;
}
switch (true) {
case $(this).is(".up"):
var prev = parent.prev();
parent.insertBefore(prev);
break;
case $(this).is(".down"):
var next = parent.next();
parent.insertAfter(next);
break;
case $(this).is(".top"):
parents.prepend(parent);
break;
case $(this).is(".bottom"):
parents.append(parent);
break;
}
});
</script>
</html>
前端点击div上下移动排序
最新推荐文章于 2024-10-29 10:01:20 发布