鼠标拖动实现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 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
layui select动态添加option的实例
Mar 07 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
不同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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php 删除cookie方法详解
2014/12/01 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
js word表格动态添加代码
2010/06/07 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
jquery选择器简述
2015/08/31 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
python中sets模块的用法实例
2014/09/30 Python
django中的setting最佳配置小结
2017/11/21 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
详解用python生成随机数的几种方法
2019/08/04 Python
基于python plotly交互式图表大全
2019/12/07 Python
python代码如何注释
2020/06/01 Python
五种Python转义表示法
2020/11/27 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
高中军训感言1000字
2014/03/01 职场文书
婚庆司仪主持词
2014/03/15 职场文书
幼儿园运动会口号
2014/06/07 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年元旦标语大全
2014/12/09 职场文书
大四学生个人总结
2015/02/15 职场文书
农业项目合作意向书
2015/05/08 职场文书
运动会入场词
2015/07/18 职场文书
导游词之凤凰古城
2019/10/22 职场文书