用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 默认隐藏, ...
随机推荐
- Android JazzyViewPager
JazzyViewPager: package com.itau.jingdong.widgets.jazzviewpager; import java.util.HashMap; import ja ...
- Github上600多个iOS开源项目地址
将Github上600多个iOS开源项目进行分类并且有相应介绍,小伙伴们快来看呀 地址:http://github.ibireme.com/github/list/ios/
- TreeMap----的实现原理（红黑树）
TreeMap的实现是红黑树算法的实现,所以要了解TreeMap就必须对红黑树有一定的了解,其实这篇博文的名字叫做:根据红黑树的算法来分析TreeMap的实现,但是为了与Java提高篇系列博文保持一致 ...
- tomcat + jdk 快速部署
环境: apache-tomcat-7.0.73 java version "1.8.0_112" 注释:创建普通用户,使用 sudu进行操作,本文略写. 1.JDK 1.jdk配 ...
- tp.c
calculate throughput /* gput.c: out.tr¤ò²òÀϤ·¤Æ¥¹¥ë¡¼¥×¥Ã¥ÈÆÃÀ¤ò·×»»¤¹¤ë * out.et¤ò²òÀϤ·¤ÆºÆÁ÷¥¿¥ ...
- 用WCAT进行IIS压力测试
用WCAT进行IIS压力测试 分类: javascript专辑 IT信息化 2008-10-13 16:56 5754人阅读 评论(1) 收藏 举报 iis测试服务器microsoft脚本网络 如何建 ...
- Python3.x 安装Scrapy框架
先判断pip是否已经安装 pip --version 确认已经安装后,使用pip安装库 pip3 install PackageName eg: pip3 install Scrapy 报错解决方案 ...
- 一、docker学习笔记——安装docker
系统win10 企业版 1.下载docker CE 2.安装.注意,由于docker 与Oracle VM VirtualBox 冲突,在windows平台上二者不可共存.你只能2选1!! 3.如果d ...
- Oracle修改表名的几种方式
因为原来所在表不想被删除,但又需要新建立一个相同表名的表,故先把原来的表的表名更改为另一个临时表名. 查看当前用户下所有的表 select tname from tab where tabtype= ...
- npm安装及webpack打包小demo
node(node.js) 安装 1.先从https://segmentfault.com/a/1190000004245357网站下载x64位的安装包node-v4.8.1-linux-x64.ta ...