先上效果图：

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

大家可以参考我的上一篇博文：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. 167. Two Sum II - Input array is sorted【Easy】【双指针-有序数组求两数之和为目标值的下标】

    Given an array of integers that is already sorted in ascending order, find two numbers such that the ...

  2. scrapy抓取拉勾网职位信息（三）——爬虫rules内容编写

    在上篇中,分析了拉勾网需要跟进的页面url,本篇开始进行代码编写. 在编写代码前,需要对scrapy的数据流走向有一个大致的认识,如果不是很清楚的话建议先看下:scrapy数据流 本篇目标:让拉勾网爬 ...

  3. SOAP Handler

    概述 SOAP Handler是一个SOAP message的拦截器,它可以拦截进来或出去两个方向的SOAP message,修改并决定是否放行. 例如: 在服务端启用一个handler,拦截请求的m ...

  4. Java 获取JVM内存和物理内存信息

    package com.sysinfo; public class MonitorInfo { /** jvm可使用内存. */ private long totalMemory; /** jvm剩余 ...

  5. Flask实战第68天：项目上线部署

    在开发机上的准备工作 1.确认项目没有bug 2.用pip freeze >requirements.txt将当前环境的包导出到requirements.txt文件中,方便部署的时候安装 3.将 ...

  6. 30、Flask实战第30天：cms模版抽离和个人信息页面完成

    cms模版抽离 新建一个cms_base.html文件作为基础模板,把cms_index.html的内容拷贝到cms_base.html中. 编辑 cms_base.html,把在不同页面会变动的部分 ...

  7. python搜索引擎（转）

    用python如何实现一个站内搜索引擎? 先想想搜索引擎的工作流程: 1.网页搜集.用深度或者广度优先的方法搜索某个网站,保存下所有的网页,对于网页的维护采用定期搜集和增量搜集的方式. 2.建立索引库 ...

  8. VB查询数据库之组合查询——机房收费总结（二）

    在机房收费系统中,组合查询用的还是挺多的,像上机状态查询窗体.学生上机统计信息窗体.操作员工记录窗体.基本信息维护窗体.这其中,学生基本信息维护窗体中的东西比较多,就以它为例子,说说组合查询吧! 学生 ...

  9. Codeforces 980 E. The Number Games

    \(>Codeforces \space 980 E. The Number Games<\) 题目大意 : 有一棵点数为 \(n\) 的数,第 \(i\) 个点的点权是 \(2^i\) ...

  10. BZOJ 1828 [Usaco2010 Mar]balloc 农场分配（贪心+线段树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1828 [题目大意] 现在有一些线段[l,r]的需求需要满足,i位置最多允许a[i]条线 ...