在页面上，控制元素上下移动，进行排序是我们比较常用的功能，今天我用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控制元素的上下移动 实现排序功能的更多相关文章
	

    
								
  1. 如何使用T-SQL备份还原数据库及c#如何调用执行？  C#中索引器的作用和实现。  jquery控制元素的隐藏和显示的几种方法。  localStorage、sessionStorage用法总结  在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一）  span<T>之高性能字符串操作实测
		
    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup  ...
    
		
    2. 
						
  2. jquery控制元素的隐藏和显示的几种方法。
		
    组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
    
		
    3. 
						
  3. jquery控制元素的隐藏和显示的几种方法
		
    使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...
    
		
    4. 
						
  4. jquery控制元素的淡入淡出切换
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    5. 
						
  5. Jquery 控制元素 上 下 移动
		
    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
    
		
    6. 
						
  6. jQuery控制元素隐藏和显示
		
    1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(functio ...
    
		
    7. 
						
  7. jQuery控制元素显示、隐藏、切换、滑动的方法
		
    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...
    
		
    8. 
						
  8. jquery控制元素的显示与隐藏
		
    比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...
    
		
    9. 
						
  9. JQuery 控制元素显示隐藏
		
    JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Android菜单(动画菜单、360波纹菜单)
			
     Android菜单(动画菜单.360波纹菜单) 前言:Android菜单常用集合:FragmentTabHost系统菜单.上移式菜单.360波纹菜单.展开式菜单.详解注释,可直接拿来用! 效果:   ...
    
			
    2. 
						
  2. 部署node.js的开发环境
			
    1.进入Node.js的官方网站下载安装包: http:nodejs.org 2.安装后打开cmd的dos窗口(在path环境变量中查看到有nodejs说明安装成功): 3.运行node.
    
			
    3. 
						
  3. idea引入依赖包报错
			
    今天在更新项目的时候,maven依赖的一个服务一直报错.查了后发现原来是因为缺少依赖包.但是依赖包明明在我本地啊. 又重新下载,依然如故... 搞了半天,发现自己的依赖包类状态都是不可用的.如下图所示 ...
    
			
    4. 
						
  4. 【Leetcode】【Medium】Flatten Binary Tree to Linked List
			
    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...
    
			
    5. 
						
  5. QueryDSL
			
    QueryDSL只是通用的查询框架,不支持写操作 查询出来的结果是List,我们不得不做额外的工作将它转化为领域实体
    
			
    6. 
						
  6. C++实现线性表的顺序存储结构
			
    将线性表的抽象数据类型定义在顺序表存储结构下用C++的类实现,由于线性表的数据元素类型不确定,所以采用模板机制. 头文件seqlist.h #pragma once #include <iost ...
    
			
    7. 
						
  7. Hyperledger Fabric 1.0 学习搭建 （一）--- 基础环境搭建
			
    1: 环境构建在本文中用到的宿主机环境是Centos ,版本为Centos.x86_64 7.2, 一定要用7版本以上, 要不然会安装出错. 通过Docker 容器来运行Fabric的节点,版本为v1 ...
    
			
    8. 
						
  8. Webpack笔记（三）——一款破产版脚手架的开发
			
    前些天一直在学习入门Webpack,后来尝试了自己搭建一下一个简单的React开发环境,后来就在想可不可以自己写一个简单的脚手架,以免每次搭建一个简单的开发环境都需要自己一个个的配置,这样很麻烦,使用 ...
    
			
    9. 
						
  9. HttpServletRequest的随手记
			
    request对象的三个主要的方法: getParameter(String name):获取请求参数名字对应的参数值.只获取一个.如果名字对应有多个参数值的话,那么只会获取参数数组中的第一个.比如一 ...
    
			
    10. 
						
  10. PHP------Jquery的用法
			
    Jquery Jquery实际上相当于一个升级版的JS,Jquery里面封装了很多的东西,Jquery的功能要比JS强大,用起来比JS方便.Jquery和JS都属于JS,只不过Jquery是封装了一个 ...
    
			
    11.