先上效果图：

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

大家可以参考我的上一篇博文：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. 一个Bean属性拷贝的工具类

    package com.fpi.spring.qaepb.cps.util; import java.beans.IntrospectionException; import java.beans.P ...

  2. (寒假开黑gym)2018 ACM-ICPC, Syrian Collegiate Programming Contest（爽题）

    layout: post title: (寒假开黑gym)2018 ACM-ICPC, Syrian Collegiate Programming Contest(爽题) author: " ...

  3. 【BZOJ 3262】 3262: 陌上花开 （CDQ分治）

    3262: 陌上花开 Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A ...

  4. 【树形dp】Distance in Tree

    [CF161.D] Distance in Tree time limit per test 3 seconds memory limit per test 512 megabytes A tree  ...

  5. 【思路】Aizu - 1367 - Rearranging a Sequence

    给你一个1~n排好的数组,每次提一个数到最前面,问你最后形成的序列. 就把他的输入顺序倒过来输出即可.没出现过的再按原序输出. #include<cstdio> using namespa ...

  6. Java高级架构师（一）第37节：反向代理和动静分离的实现

    http协议->server->location 输入http:locahost:80/ 进入百度的界面. 做负载转发测试.路径已经转发,可能一些协议已经屏蔽了,导致内容出不来. 关于负载 ...

  7. [转]Servlet的load-on-startup

      在servlet的配置当中,<load-on-startup>5</load-on-startup>的含义是: 标记容器是否在启动的时候就加载这个servlet. 当值为0 ...

  8. Educational Codeforces Round 6 F. Xors on Segments 暴力

    F. Xors on Segments 题目连接: http://www.codeforces.com/contest/620/problem/F Description You are given ...

  9. 将HTML表格的每行每列转为数组，采集表格数据

    将HTML表格的每行每列转为数组,采集表格数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 //将HTML ...

  10. ms_sql_server_architecture

    We have classified the architecture of SQL Server into the following parts for easy understanding − ...