鼠标拖动实现DIV排序示例代码


Posted in Javascript onOctober 14, 2013

先上效果图:
鼠标拖动实现DIV排序示例代码 
对比传统的排序,这是一个很不错的尝试,希望对大家有启发。

大家可以参考我的上一篇博文:https://3water.com/article/42087.htm

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; 
}
Javascript 相关文章推荐
如何用JavaScript定义一个类
Sep 12 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
JSONObject使用方法详解
Dec 17 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
深入理解js promise chain
May 05 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
在vue项目中封装echarts的步骤
Dec 25 Vue.js
不同Jquery版本引发的问题解决
Oct 14 #Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 #Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 #Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 #Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 #Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 #Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 #Javascript
You might like
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
python 多线程应用介绍
2012/12/19 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
Python如何telnet到网络设备
2021/02/18 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
英国行业制服供应商:Alexandra
2019/09/14 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
承认错误的检讨书
2014/01/30 职场文书
给校长的建议书300字
2014/05/16 职场文书
美丽心灵观后感
2015/06/01 职场文书
呐喊读书笔记
2015/06/30 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS