先上效果图：

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

大家可以参考我的上一篇博文：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. python selenium firefox 添加cookie add_cookie

    from selenium import webdriver driver = webdriver.Firefox() driver.get('http://www.baidu.com') cooki ...

  2. VMware8安装配置Win7、CentOS-7向导

    1.宿主电脑配置情况 Windows 8.1 中文版 Intel(R) Core(TM) i5-4210U CPU @ 1.70GHz 2.4GHz RAM: 8G Type: 64 bit 2.软件 ...

  3. 2015 ACM-ICPC 沈阳站

    题目链接  2015 ACM-ICPC Shenyang Problem A Problem B Problem C Problem D 签到题,所有gcd的倍数都可以被写出来. 那么判断一下这类数的 ...

  4. Bzoj4753/洛谷P4432 [JSOI2016]最佳团体（0/1分数规划+树形DP）

    题面 Bzoj 洛谷 题解 这种求比值最大就是\(0/1\)分数规划的一般模型. 这里用二分法来求解最大比值,接着考虑如何\(check\),这里很明显可以想到用树形背包\(check\),但是时间复 ...

  5. C++中的error C2662，const的this指针问题

    今天在写C++代码的时候遇到一个错误,涉及到了常量的this指针的问题. 简化后的代码如下: #include <iostream> #include <string> usi ...

  6. [Atcoder 080] A~D Tutorial

    很好奇这周为什么只有Beginner Contest而没有Regular Contest,本来想着去30minAK的,结果1个小时了还有一道题调不出来o(╯□╰)o A:Parking 让我体验了下开 ...

  7. hdu 1402（FFT乘法 || NTT乘法）

    A * B Problem Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  8. 【循环节】【矩阵乘法】MIPT-2016 Pre-Finals Workshop, Taiwan NTU Contest, Sunday, March 27, 2016 Problem F. Fibonacci of Fibonacci

    题意:F(n)为斐波那契数列的第n项,问你F(F(n)) mod 20160519的值. 发现有循环节,F(26880696)=0,F(26880697)=1,.... 于是两次矩乘快速幂即可. #i ...

  9. JDK源码学习笔记——Object

    一.源码解析 public class Object { /** * 一个本地方法,具体是用C(C++)在DLL中实现的,然后通过JNI调用 */ private static native void ...

  10. oracle数据库，mybatis批量insert，缺失values字段

    报错:### Error updating database.  Cause: java.sql.SQLException: ORA-00926: 缺失 VALUES 关键字### The error ...