用Jquery控制元素的上下移动 实现排序功能
在页面上,控制元素上下移动,进行排序是我们比较常用的功能,今天我用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元素(呃,纠正一下用词,后面插入,哈哈,结果都一样)。如图:
若是有人问,你说好的排序功能呢? 嗯,我的回答是排序只不过是要拿元素的数据值对吧,那么你就遍历元素$('.content')的孩子p元素,取p元素的值存储到一个数组就是了。这里就不写代码过程了。
文件下载地址:https://files.cnblogs.com/files/mobeisanghai/Jqsort.rar
本期讲解就到这里, 本文为作者原创,如有转载请标明文章出处:
https://www.cnblogs.com/mobeisanghai/p/9318418.html
作者:漠北桑海
用Jquery控制元素的上下移动 实现排序功能的更多相关文章
- 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- jquery控制元素的隐藏和显示的几种方法。
组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
- jquery控制元素的隐藏和显示的几种方法
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...
- jquery控制元素的淡入淡出切换
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Jquery 控制元素 上 下 移动
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- jQuery控制元素隐藏和显示
1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(functio ...
- jQuery控制元素显示、隐藏、切换、滑动的方法
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...
- jquery控制元素的显示与隐藏
比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...
- JQuery 控制元素显示隐藏
JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...
随机推荐
- Ubuntu 中QT 用sogou拼音 安装
1.下载搜狗输入法的安装包 下载地址为:http://pinyin.sogou.com/linux/ ,如下图,要选择与自己系统位数一致的安装包,我的系统是64位,所以我下载64位的安装包 2.按键C ...
- ES6学习笔记(一)
‘变量’声明 ES6新增两个声明’变量’的关键字,let和const命令. l let用来声明局部变量 同ES5中var声明的变量不同的是,let声明的变量的作用域范围仅仅是从其声明的地方开始,到其 ...
- Android学习——自定义控件(二)
这篇文章来介绍自定义组合控件,自定义组合控件的应用场景很多,比如当你的UI如下时: 倘若不使用组合控件,则需要在XML文件中声明4个TextView和4个EditText,而使用了组合控件,则只需要四 ...
- 从Linux访问Windows共享目录
今天装备用VMWare装台Linux服务器来学习Oracle数据库,由于安装包是下载到本地的Windows系统,需要拷贝到Linux虚机里面去.搞了半天.想到虚机网络设成桥接,然后访问.百度了一下.最 ...
- 使用CoreImage教程
使用CoreImage教程 CoreImage包含有很多实用的滤镜,专业处理图片的库,为了能看到各种渲染效果,请使用如下图片素材. 现在可以开始教程了: #define FIX_IMAGE(image ...
- l2tp over ipsec
搭建教程: 转自: https://segmentfault.com/a/1190000006125737 http://www.wangyuxiong.com/blog/ti-yan-qiang-w ...
- 在IIS7上导出所有应用程序池的方法 批量域名绑定
在IIS7+上导出所有应用程序池的方法:%windir%/system32/inetsrv/appcmd list apppool /config /xml > c:/apppools.xml ...
- js中公有方法、特权方法、静态方法
1.公有属性和公有方法 1 2 3 4 5 6 7 8 9 function User(name,age){ this.name = name;//公有属性 this.age = age; } ...
- Kali-linux目录加密
在Kali中提供了一个目录加密工具TrueCrypt.该工具是一款开源的绿色加密卷加密软件,不需要生成任何文件即可在硬盘上建立虚拟磁盘.用户可以按照盘符进行访问,所以虚拟磁盘上的文件都被自动加密,访问 ...
- 将数组打印到txt文件中
用print_r 将数组打印到txt文件中. 1.function save_log($content='', $file='app') { $logDir = './logs'; $now ...