先上效果图：

对比传统的排序，这是一个很不错的尝试，希望对大家有启发。

大家可以参考我的上一篇博文：http://blog.csdn.net/littlebo01/article/details/12620901

html部分：

<html>

  <head>

    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<link href="css/create.css" rel="stylesheet" type="text/css" />

	<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

	<script src="js/jquery-ui.js" type="text/javascript"></script>

	<script src="js/create.js" type="text/javascript"></script>

  </head>

  <body>

     <form>

       <ul>

  <li >

				<div id="liuc" style="display:block;">

					<div class='leftdiv' style="height:60px">指标：</div>

					<div class="eMain" >

						<input style="float:left;" type="button" name="insert" class="selfpopup_button" onclick="addevaluate()" value="添加">  <span class="eInfo"> 注：可以通过拖动来改变指标顺序（不含任务开始时间和任务结束时间指标）。</span>

	    				<div title="指标1" class="eBody">

	    				    <label class="eNumber">序号：1  </label>

	    				    <label style="float:left">指标名称：</label><input class="eName evaluate_name eject_input_text" name="index_name_1" type="text" value="任务开始时间"/>

							<label style="float:left">  时限：</label>  <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_1" type="text" /><span class="eMinute">分钟</span>

							<label style="float:left">  预警时间：</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_1" type="text" /><span class="eMinute">分钟</span>

	    				</div>

	    				<div action-type="processdiv" id="processdiv" name="processdiv" style="width:800px;">

						</div>

	    				<div title="指标2" id="lastevaluate" class="eBody">

	    				    <div class="eNumber" id="order">序号：2</div>

	    				    <label style="float:left" >  指标名称：</label><input class="eName evaluate_name eject_input_text" name="index_name_2" type="text" value="任务结束时间"/>

							<label style="float:left">  时限：</label>  <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_2" type="text" /><span class="eMinute">分钟</span>

							<label style="float:left">  预警时间：</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_2" type="text" /><span class="eMinute">分钟</span>

	    				</div>

					</div>

				</div>

			</li>

</ul>

     </form>

  </body>

</html>

JS部分：

//添加指标

function addevaluate(){

    var n = $(".evaluate_name").size();

    var html = '';

    html = "<div title='"+n+"' class='eBody' id='div_"+n+"'><label class='eNumber'>序号："+n+"</label><label style='float:left;'>  指标名称：</label><input class='eName evaluate_name eject_input_text' name='index_name_"+n+"' type='text'/>";

    html += "<label style='float:left;'>  时限：</label>  <input class='eLimit evaluate_limit eject_input_text' name='index_limit_time_"+n+"' type='text'/><span class='eMinute'>分钟</span>";

    html += "<label style='float:left;'>  预警时间：</label><input class='eAlert evaluate_alert eject_input_text' name='index_alert_time_"+n+"' type='text'/><span class='eMinute'>分钟</span>";

    html += "<input type='button' name='evaluatemove' value='移除' onclick='evaluatemove("+n+")'/></div>";

    $("div[name=processdiv]").append(html);

    //使div可以拖拽

    $("div[name=processdiv]").sortable({

              update: function (event, ui) {

		  evaluaterefresh();

              }

    });

    //指标重新排序

    evaluaterefresh();

}

//移除指标

function evaluatemove(n){

	$("#div_"+n+"").remove();

	evaluaterefresh();

}

//移除指标后重新编号

function evaluaterefresh(){

	var count=$('.evaluate_name').length-2;

	for(var i=0;i<count;i++){

	    var j = i+2;

		$('div[name="processdiv"] div:eq('+i+') input:eq(0)').attr("name","index_name_"+j);

		$('div[name="processdiv"] div:eq('+i+') input:eq(1)').attr("name","index_limit_time_"+j);

		$('div[name="processdiv"] div:eq('+i+') input:eq(2)').attr("name","index_alert_time_"+j);

		$('div[name="processdiv"] div:eq('+i+') input:eq(3)').attr("name","index_description_"+j);

		$('div[name="processdiv"] div:eq('+i+')').attr("title","指标"+j);

		$('div[name="processdiv"] div:eq('+i+') label:eq(0)').html("序号："+j);

	}

        //给最后一条固定名称的指标设置序号

        var lastcount;

        if(count==0 || count=='0'){

          lastcount = 2;

        }else {

	  lastcount = count+2;

	}

        $('#lastevaluate input:eq(0)').attr("name","index_name_"+lastcount);

        $('#lastevaluate input:eq(1)').attr("name","index_limit_time_"+lastcount);

        $('#lastevaluate input:eq(2)').attr("name","index_alert_time_"+lastcount);

        $('#lastevaluate input:eq(3)').attr("name","index_description_"+lastcount);

        $('#lastevaluate').attr("title","指标"+lastcount);

	$('#order').html('');

	$('#order').html("序号："+lastcount);

}

//保存任务类型和指标数据到数据库

function evaluatesave(){

                evaluaterefresh();

	        var task_name=$("#sort_type").val();

		var task_remark=$("#sort_remark").val();

                var task_id = $("#task_id").val();

	        var count = $(".evaluate_name").size();

	        if(task_name.trim()==""||task_name.trim()==null){

				jAlert("任务类型名称不能为空", "提示");

				return ;

			}

			if(task_name.length>10){

				jAlert("任务类型字数最多为10个字", "提示");

				return ;

			}

			var evaluate_name = new Array();

			var evaluate_limit = new Array();

			var evaluate_alert = new Array();

			var evaluate_desc = new Array();

			for(var i=1;i <=count;i++){

			   evaluate_name[i] =  $("input[name='index_name_"+i+"']").val();

			   if(evaluate_name[i].trim()==""||evaluate_name[i]==null){

			   	jAlert("指标名称不能为空", "提示");

				return ;

			   }

			   evaluate_limit[i] =  $("input[name='index_limit_time_"+i+"']").val();

			   if(evaluate_limit[i].trim()==""||evaluate_limit[i]==null){

			   	jAlert("指标时限不能为空", "提示");

				return ;

			   }else if(isNaN(evaluate_limit[i].trim())){

				jAlert("指标时限必须全是数字", "提示");

				return ;

			   }

			   evaluate_alert[i] =  $("input[name='index_alert_time_"+i+"']").val();

			   if(evaluate_alert[i].trim()==""||evaluate_alert[i]==null){

			   	jAlert("指标预警时间不能为空", "提示");

				return ;

			   }else if(isNaN(evaluate_alert[i].trim())){

				jAlert("指标预警时间必须全是数字", "提示");

				return ;

			   }

			   evaluate_desc[i] =  $("input[name='index_description_"+i+"']").val();

			}

			var indexname = evaluate_name.join('-');

			var indexlimit = evaluate_limit.join('-');

			var indexalert = evaluate_alert.join('-');

			var indexdesc = evaluate_desc.join('-');

			$.ajax({

					url:"/SortsManagement/exectute_evaluate_save",

					type:"POST",

					data:{

						 task_icon:initializationData.filepath,

						 task_name:task_name,

						 task_id:task_id,

						 task_remark:task_remark,

						 count:count,

						 indexname:indexname,

						 indexlimit:indexlimit,

						 indexalert:indexalert,

						 indexdesc:indexdesc

					},

					dataType:"text",

					success:function(result){

						if(result==1){

							alert("添加成功");

							sorts_list();

							$.selfalerts._hide();

						}else{

							alert("添加不成功，请重新尝试");

							return false;

						}

					}

				});

}

css部分：

/*每条指标*/

.eBody{

  overflow:hidden;

  background:lightgray;

  width:700px;

  margin-left:55px;

  border-radius:5px;

  margin-bottom:10px;

}

.eMain{

color:#001F69;

float:left;font-family: '微软雅黑';

font-style: inherit;

font-weight: inherit;

line-height: 2.2;

margin-left: 10px;

text-align: left;

width: 550px;

}

/*使用提示语*/

.eInfo{

color:red;font-size:12px;

}

.eNumber{

  float:left;

  margin-left:10px;

}

.eName{

 float:left;width:150px

}

.eLimit, .eAlert{

 float:left;width:50px;text-align:center;

}

.eMinute{

 float:left;margin-left:3px;

}

参考：
http://jqueryui.com/sortable/

[置顶] 原创鼠标拖动实现DIV排序的更多相关文章

  1. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  2. 鼠标拖动改变DIV等网页元素的大小的最佳实践

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...

  3. [置顶] Codeforces 70D 动态凸包 (极角排序 or 水平序)

    题目链接:http://codeforces.com/problemset/problem/70/D 本题关键:在log(n)的复杂度内判断点在凸包 或 把点插入凸包 判断:平衡树log(n)内选出点 ...

  4. JavaScript学习笔记-元素在滚动条滑动一定高度后自动置顶

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

  6. 基于js鼠标拖动图片排序

    分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...

  7. 使用JS制作一个鼠标可拖的DIV（一）——鼠标拖动

    使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放 ...

  8. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  9. mysql选择上一条、下一条数据记录，排序上移、下移、置顶

    1.功能须要 完毕列表排序上移,下移,置顶功能.效果例如以下图所看到的: 2设置思路 设置一个rank为之间戳,通过选择上移,就是将本记录与上一条记录rank值交换,下移就是将本条记录与下一条记录ra ...

随机推荐

  1. (8)go 字符串

    内建函数在 包中 1. len(str) 计算长度,中文占3个字符 2.字符串遍历,同时处理中文 package main import ( "fmt" ) func main() ...

  2. 两个线程交替打印奇偶数【Lock版】

    import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.ReentrantLock; public clas ...

  3. 简单了解gzip、bzip2、xz

    压缩工具gzip.bzip2.xz分别对应压缩格式.gz..bz2..xz.不过tar命令已经可以满足大部分使用,所以这些格式只简单了解一下.gzip压缩速度最快,xz压缩率最高,bz2适中.一般这三 ...

  4. Jenkins实现CI(Continuous Integration)到CD(Continuous Delivery)

    Pipeline as Code是2.0的精髓所在,是帮助Jenkins实现CI(Continuous Integration)到CD(Continuous Delivery)华丽转身的关键推手.所谓 ...

  5. Redux 洋葱模型理解

    下面的代码会输出: A middleware1 开始C middleware2 开始E middleware3 开始======= G =======F middleware3 结束D middlew ...

  6. 【BZOJ 2151】 2151: 种树 （贪心+堆+双向链表）

    2151: 种树 Description A城市有一个巨大的圆形广场,为了绿化环境和净化空气,市政府决定沿圆形广场外圈种一圈树.园林部门得到指令后,初步规划出n个种树的位置,顺时针编号1到n.并且每个 ...

  7. Educational Codeforces Round 41 (Rated for Div. 2) ABCDEF

    最近打的比较少...就只有这么点题解了. A. Tetris time limit per test 1 second memory limit per test 256 megabytes inpu ...

  8. POJ 3437 Tree Grafting

    题意:给出一个深度优先遍历树的up down顺序,求这棵树以及这棵树变为”左子右兄”树的高度 思路:直接dfs,x代表树1的高度,y代表树2的高度 #include<cstdio> #in ...

  9. Codeforces Round #344 (Div. 2) B. Print Check 水题

    B. Print Check 题目连接: http://www.codeforces.com/contest/631/problem/B Description Kris works in a lar ...

  10. ConstraintLayout导读

    ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在去年的I/O大会上重点宣传的一个功能,可以把ConstraintLayout看成是一个更高 ...