首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

鼠标拖动实现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; 
}

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
Bootstrap弹出框（Popover）被挤压的问题小结
Jul 11 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
滚动条(1) 鸿蒙3.0(1) win7(2) 鸿蒙(2) 蓝屏(1) Debian(1) 输入法(2) svg(1) Sunmao(1) 声卡驱动(1)
You might like
linux实现php定时执行cron任务详解
2013/12/24 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
vue表单验证你真的会了吗？vue表单验证（form）validate
2019/04/07 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
pandas DataFrame运算的实现
2020/06/14 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
手工制作的豪华英式沙发和沙发床：Willow & Hall
2019/05/03 全球购物
成人教育自我鉴定
2013/11/01 职场文书
聘用意向书
2014/07/29 职场文书
学校运动会报道稿
2014/09/23 职场文书
西安导游词
2015/02/12 职场文书
索赔员岗位职责
2015/02/15 职场文书
化工厂员工工作总结
2015/10/15 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python