时间：2023-02-23 浏览量： 收藏
通过Jquery控制元素上下移动，进行排序是比，功能齐全的实现方式。
下面是基础的引入jq和html元素部分：
简体中文
繁體中文
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
.content{
float : left;
height: 245px;
width : 400px;
}
.content p{
background: #eee;
border:1px #000 solid;
height: 30px;
width: 100%;
}
.right{
float: left;
margin-left: 10px;
height: 245px;
width: 100px;
padding: 5px;
margin-top: 84px;
}
.right div{
width: 85px;
height: 50px;
margin: 7px;
text-align: center;
background: #00BCD4;
border-radius: 4px;
cursor: pointer;
line-height: 3;
}
</style>
<body> <div class="content">
<p data="false">001</p>
<p data="false">002</p>
<p data="false">003</p>
<p data="false">004</p>
<p data="false">005</p>
<p data="false">006</p>
<p data="false">007</p>
<p data="false">008</p>
<p data="false">009</p>
</div> <div class="right">
<div onclick="goup()">上移到顶部</div>
<div onclick="up()">上移</div>
<div onclick="down()">下移</div>
<div onclick="godown()">下移到尾部</div>
</div> </body>下方代码为js 部分：
var domp=$('p');
$(document).ready(function(){
$("p").on("click",function(){
var ok=$(this).attr('data');
for (var i = 0; i < domp.length; i++) {
if(domp[i]!=this){
$(domp[i]).attr('data','false');
$(domp[i]).css("background-color","#eee");
}
}
if(ok=="true"){
$(this).attr('data',"false");
$(this).css("background-color","#eee");
}else{
$(this).attr('data',"true");
$(this).css("background-color","pink");
}
});
})
/**
* 连续向上
*/
function goup(){ $.each(domp,function(i,t){
var fl=$(t).attr('data');
if(fl=="true"){
if($(t).prev().size()>0){
$(t).parent().children("p:first-child").before(t);
}
}
})
}
/**
* 向上移动
*/
function up(){
console.log(domp.children())
$.each(domp,function(i,t){
var fl=$(t).attr('data');
if(fl=="true"){
if($(t).prev().size()>0){
$(t).prev().before(t);
}
}
})
}
/**
* 向下移动
**/
function down(){
$.each(domp,function(i,t){
var fl=$(t).attr('data');
if(fl=="true"){
if($(t).next().size()>0){
$(t).next().after(t);
}
}
})
}
/**
* 连续向下移动
**/
function godown(){
$.each(domp,function(i,t){
var fl=$(t).attr('data');
if(fl=="true"){
if($(t).next().size()>0){
$(t).parent().children("p:last-child").after(t);
}
}
})
}上述代码解析：
$(document).ready（）,$('p').on（'click',function(){}）是jq比较常用的绑定事件方法，当然还有off()清除事件方法，对这个不了解的同学可以普及一下知识点。
<p data="false">001</p> 和var ok=$(this).attr('data'); 这种写法，在jq控制元素中很常见，其特点就是给元素绑一个属性，属性可以随便起个名字。在这里，我是用来控制元素是否被选中的，以及用for循环控制职能单选。
$(t).prev()是点击元素的上一个兄弟节点，jq.before（t）方法是在某个元素jq的上面插入t元素；
$(t).next()获取的事点击元素的下个节点，jq.after（t）方法在某个元素jq的下面插入t元素。效果图：
RELATED RECOMMEND
2023-02-23
1、通过PHPStudy中composer工具来安装thinkphp6.0:2、执行composer安装命令 composer create-project topthink/think tp6 6.0.*-dev：3、遇到安装失败，请更新镜像地址，
2023-02-23
在php程序判断客户端是通过电脑端还是手机端访问，以下是经过测试可行的函数function isMobile() { static $is_mobile = null; null === $is_mobile &&
2023-02-23
使用Teleport Pro软件的朋友应该知道他是一个离线浏览器，而他更大的作用则是可以用来下载别人的整站，软件的功能虽然好，但是却有一个很头疼的缺点，那就是下载下来 的网页它会在图片标签内插入tppabs标签以记录该图片的原始地址。因为这个标签不是合法标签，所以普通浏览器会忽略它。如图所示：其实可以在 DreamWeaver中使用正则表达式批量清除tppabs标签. 具体写法如下: 匹配tppabs标签: \btppabs="h[^"]*" 替换为 (空) 匹配javas...
Copyright © 2012-2024 世敏网络 版权所有 闽ICP备18026760号-1 
闽公网安备 35020502000640号 网站地图 Sitemap
关键词聚合
