先上效果图：

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

大家可以参考我的上一篇博文：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安全 - 从SSRF到命令执行惨案

    转:https://www.leavesongs.com/PENETRATION/getshell-via-ssrf-and-redis.html Python安全 - 从SSRF到命令执行惨案 PH ...

  2. 如何访问mvc 默认的错误页

    在ActionResult 中: public ActionResult Error() { return View("~/Views/Shared/Error.cshtml"); ...

  3. java 的Calendar类的可视化日历示例

    import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...

  4. ZOJ 2974 Just Pour the Water

    矩阵快速幂. 构造一个矩阵,$a[i][j]$表示一次操作后,$j$会从$i$那里得到水的比例.注意$k=0$的时候,要将$a[i][j]$置为$1$. #pragma comment(linker, ...

  5. DOS中的CD命令详解

    CD命令是改变子目录的命令.格式:CD [路径] . 值得明确的是:CD命令只能进入当前盘符中的文件夹,改变操作的根目录(改变操作盘符),则不需用cd.例如你当前是在c:盘下,要到d:盘,只需键入d: ...

  6. shell 文件个数 vs 文件夹个数

    文件个数 ls -l |grep "^-"|wc -l 文件夹个数 ls -l |grep "^d"|wc -l

  7. Problem E: 12306

    #include <stdio.h> struct student{ int n; int m;}; int main(void) { int T; int k,g,i,j; ],max; ...

  8. (转载)JavaScript中匿名函数，函数直接量和闭包

    首先,我们先看看下面几种写法:1.function f(x){return x*x;};f(x);2.(function(x){return x*x;})(x);3.(function(x){retu ...

  9. SNAT的作用是什么

    SNAT,可能有人觉得奇怪,好好的为什么要进行ip地址转换啊,为了弄懂这个问题,我们要看一下局域网用户上公网的原理,假设内网主机A(192.168.2.8)要和外网主机B(61.132.62.131) ...

  10. [典型漏洞分享]exported Android content provider引发的隐私泄露问题

    YS android手机APP对外开放多余的content provider,可任意增.删.改和查images数据库表格,导致隐私泄露 问题描述: YS android手机APP使用SQLITE数据库 ...