先上效果图：

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

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

html部分：

  1. <html>
  2.   <head>
  3.     	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  4. 	<link href="css/create.css" rel="stylesheet" type="text/css" />
  5. 	<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
  6. 	<script src="js/jquery-ui.js" type="text/javascript"></script>
  7. 	<script src="js/create.js" type="text/javascript"></script>
  8.   </head>
  9.   <body>
  10.      <form>
  11.        <ul>
  12.   <li >
  13. 				<div id="liuc" style="display:block;">
  14. 					<div class='leftdiv' style="height:60px">指标：</div>
  15. 					<div class="eMain" >
  16. 						<input style="float:left;" type="button" name="insert" class="selfpopup_button" onclick="addevaluate()" value="添加">  <span class="eInfo"> 注：可以通过拖动来改变指标顺序（不含任务开始时间和任务结束时间指标）。</span>
  17. 	    				<div title="指标1" class="eBody">
  18. 	    				    <label class="eNumber">序号：1  </label>
  19. 	    				    <label style="float:left">指标名称：</label><input class="eName evaluate_name eject_input_text" name="index_name_1" type="text" value="任务开始时间"/>
  20. 							<label style="float:left">  时限：</label>  <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_1" type="text" /><span class="eMinute">分钟</span>
  21. 							<label style="float:left">  预警时间：</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_1" type="text" /><span class="eMinute">分钟</span>
  22. 	    				</div>
  23. 	    				<div action-type="processdiv" id="processdiv" name="processdiv" style="width:800px;">
  24.  
  25. 						</div>
  26. 	    				<div title="指标2" id="lastevaluate" class="eBody">
  27. 	    				    <div class="eNumber" id="order">序号：2</div>
  28. 	    				    <label style="float:left" >  指标名称：</label><input class="eName evaluate_name eject_input_text" name="index_name_2" type="text" value="任务结束时间"/>
  29. 							<label style="float:left">  时限：</label>  <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_2" type="text" /><span class="eMinute">分钟</span>
  30. 							<label style="float:left">  预警时间：</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_2" type="text" /><span class="eMinute">分钟</span>
  31. 	    				</div>
  32. 					</div>
  33. 				</div>
  34. 			</li>
  35. </ul>
  36.      </form>
  37.   </body>
  38. </html>

JS部分：

  1. //添加指标
  2. function addevaluate(){
  3.     var n = $(".evaluate_name").size();
  4.     var html = '';
  5.     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'/>";
  6.     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>";
  7.     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>";
  8.     html += "<input type='button' name='evaluatemove' value='移除' onclick='evaluatemove("+n+")'/></div>";
  9.     $("div[name=processdiv]").append(html);
  10.     //使div可以拖拽
  11.     $("div[name=processdiv]").sortable({
  12.               update: function (event, ui) {
  13. 		  evaluaterefresh();
  14.               }
  15.     });
  16.     //指标重新排序
  17.     evaluaterefresh();
  18. }
  19.  
  20. //移除指标
  21. function evaluatemove(n){
  22. 	$("#div_"+n+"").remove();
  23. 	evaluaterefresh();
  24. }
  25.  
  26. //移除指标后重新编号
  27. function evaluaterefresh(){
  28. 	var count=$('.evaluate_name').length-2;
  29. 	for(var i=0;i<count;i++){
  30. 	    var j = i+2;
  31. 		$('div[name="processdiv"] div:eq('+i+') input:eq(0)').attr("name","index_name_"+j);
  32. 		$('div[name="processdiv"] div:eq('+i+') input:eq(1)').attr("name","index_limit_time_"+j);
  33. 		$('div[name="processdiv"] div:eq('+i+') input:eq(2)').attr("name","index_alert_time_"+j);
  34. 		$('div[name="processdiv"] div:eq('+i+') input:eq(3)').attr("name","index_description_"+j);
  35. 		$('div[name="processdiv"] div:eq('+i+')').attr("title","指标"+j);
  36. 		$('div[name="processdiv"] div:eq('+i+') label:eq(0)').html("序号："+j);
  37. 	}
  38.  
  39.         //给最后一条固定名称的指标设置序号
  40.         var lastcount;
  41.         if(count==0 || count=='0'){
  42.           lastcount = 2;
  43.         }else {
  44. 	  lastcount = count+2;
  45. 	}
  46.  
  47.         $('#lastevaluate input:eq(0)').attr("name","index_name_"+lastcount);
  48.         $('#lastevaluate input:eq(1)').attr("name","index_limit_time_"+lastcount);
  49.         $('#lastevaluate input:eq(2)').attr("name","index_alert_time_"+lastcount);
  50.         $('#lastevaluate input:eq(3)').attr("name","index_description_"+lastcount);
  51.         $('#lastevaluate').attr("title","指标"+lastcount);
  52. 	$('#order').html('');
  53. 	$('#order').html("序号："+lastcount);
  54. }
  55.  
  56. //保存任务类型和指标数据到数据库
  57. function evaluatesave(){
  58.                 evaluaterefresh();
  59. 	        var task_name=$("#sort_type").val();
  60. 		var task_remark=$("#sort_remark").val();
  61.                 var task_id = $("#task_id").val();
  62. 	        var count = $(".evaluate_name").size();
  63. 	        if(task_name.trim()==""||task_name.trim()==null){
  64. 				jAlert("任务类型名称不能为空", "提示");
  65. 				return ;
  66. 			}
  67. 			if(task_name.length>10){
  68. 				jAlert("任务类型字数最多为10个字", "提示");
  69. 				return ;
  70. 			}
  71. 			var evaluate_name = new Array();
  72. 			var evaluate_limit = new Array();
  73. 			var evaluate_alert = new Array();
  74. 			var evaluate_desc = new Array();
  75. 			for(var i=1;i <=count;i++){
  76. 			   evaluate_name[i] =  $("input[name='index_name_"+i+"']").val();
  77. 			   if(evaluate_name[i].trim()==""||evaluate_name[i]==null){
  78. 			   	jAlert("指标名称不能为空", "提示");
  79. 				return ;
  80. 			   }
  81. 			   evaluate_limit[i] =  $("input[name='index_limit_time_"+i+"']").val();
  82. 			   if(evaluate_limit[i].trim()==""||evaluate_limit[i]==null){
  83. 			   	jAlert("指标时限不能为空", "提示");
  84. 				return ;
  85. 			   }else if(isNaN(evaluate_limit[i].trim())){
  86. 				jAlert("指标时限必须全是数字", "提示");
  87. 				return ;
  88. 			   }
  89. 			   evaluate_alert[i] =  $("input[name='index_alert_time_"+i+"']").val();
  90. 			   if(evaluate_alert[i].trim()==""||evaluate_alert[i]==null){
  91. 			   	jAlert("指标预警时间不能为空", "提示");
  92. 				return ;
  93. 			   }else if(isNaN(evaluate_alert[i].trim())){
  94. 				jAlert("指标预警时间必须全是数字", "提示");
  95. 				return ;
  96. 			   }
  97. 			   evaluate_desc[i] =  $("input[name='index_description_"+i+"']").val();
  98. 			}
  99. 			var indexname = evaluate_name.join('-');
  100. 			var indexlimit = evaluate_limit.join('-');
  101. 			var indexalert = evaluate_alert.join('-');
  102. 			var indexdesc = evaluate_desc.join('-');
  103. 			$.ajax({
  104. 					url:"/SortsManagement/exectute_evaluate_save",
  105. 					type:"POST",
  106. 					data:{
  107. 						 task_icon:initializationData.filepath,
  108. 						 task_name:task_name,
  109. 						 task_id:task_id,
  110. 						 task_remark:task_remark,
  111. 						 count:count,
  112. 						 indexname:indexname,
  113. 						 indexlimit:indexlimit,
  114. 						 indexalert:indexalert,
  115. 						 indexdesc:indexdesc
  116. 					},
  117. 					dataType:"text",
  118. 					success:function(result){
  119. 						if(result==1){
  120. 							alert("添加成功");
  121. 							sorts_list();
  122. 							$.selfalerts._hide();
  123. 						}else{
  124. 							alert("添加不成功，请重新尝试");
  125. 							return false;
  126. 						}
  127. 					}
  128. 				});
  129. }

css部分：

  1. /*每条指标*/
  2. .eBody{
  3.   overflow:hidden;
  4.   background:lightgray;
  5.   width:700px;
  6.   margin-left:55px;
  7.   border-radius:5px;
  8.   margin-bottom:10px;
  9. }
  10.  
  11. .eMain{
  12. color:#001F69;
  13. float:left;font-family: '微软雅黑';
  14. font-style: inherit;
  15. font-weight: inherit;
  16. line-height: 2.2;
  17. margin-left: 10px;
  18. text-align: left;
  19. width: 550px;
  20. }
  21.  
  22. /*使用提示语*/
  23. .eInfo{
  24. color:red;font-size:12px;
  25. }
  26. .eNumber{
  27.   float:left;
  28.   margin-left:10px;
  29. }
  30.  
  31. .eName{
  32.  float:left;width:150px
  33. }
  34.  
  35. .eLimit, .eAlert{
  36.  float:left;width:50px;text-align:center;
  37. }
  38.  
  39. .eMinute{
  40.  float:left;margin-left:3px;
  41. }

参考：
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. VMware Workstation的三种网络连接方式

    桥接模式(Bridged).NAT模式(地址转换模式).仅主机模式(Host-Only) 桥接模式就是将主机网卡与虚拟机的网卡利用虚拟网桥进行通信.在桥接的作用下,类似于把物理主机虚拟为一个交换机,所 ...

  2. 【分块】MIPT-2016 Pre-Finals Workshop, Taiwan NTU Contest, Sunday, March 27, 2016 Problem A. As Easy As Possible

    给你一个字符串,多次区间询问,问你在该区间内最多能有几个easy重复的子序列. 显然如果只有一次询问,从左到右贪心做即可. 分块,预处理任意两块间的答案,不过要把以e a s y开头的四个答案都处理出 ...

  3. js流程控制与函数

    流程控制 1.条件语句 分支结构 单向分支 if (条件表达式){ code... } 双向分支 if (条件表达式){ code... }else{ code... } 多向分支 if (条件表达式 ...

  4. [转]Java常用概念解答

    1. 事务是什么? 事务是作为一个逻辑单元执行的一系列操作,一个逻辑工作单元必须有四个属性,称为 ACID(原子性. 一致性.隔离性和持久性)属性,只有这样才能成为一个事务: 原子性 事务必须是原子工 ...

  5. Codeforces Round #127 (Div. 1) D. Brand New Problem 暴力dp

    D. Brand New Problem 题目连接: http://www.codeforces.com/contest/201/problem/D Description A widely know ...

  6. c#版 mqtt 3.1.1 client 实现

    c# 版 mqtt 3.1.1 client http://docs.oasis-open.org/mqtt/mqtt/v3.1.1/mqtt-v3.1.1.html 上面为 3.1.1 协议报文 一 ...

  7. Word中向左缩进

    除了调节标线外(有时候不知道会不会改动其他),还可以shift+tab.

  8. GitHub 上100个最受欢迎的Java基础类库

    作为一名整天与既成熟且不断发展的Java语言打交道的开发者,面对的困境之一就是在我们编写代码的时候,是使用一些人人谈论的人们新技术呢,还是坚持使用一些虽旧但成熟的类库? 由于Java应用中大部分是商业 ...

  9. Microsoft office（2）多级标题的设置

    在Microsoft office中要达到下面的标题结构: 1.首先将文字准备好: 2.将“绪论”,“无线...介绍”等章节标题分别选中 :段落-->大纲级别-->1级 3.同样的,“研究 ...

  10. Openshift部署Zookeeper和Kafka

    部署Zookeeper github网址 https://github.com/ericnie2015/zookeeper-k8s-openshift 1.在openshift目录中,首先构建imag ...