首页
所有分类
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 相关文章推荐
javascript和jquery修改a标签的href属性
Dec 16 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
exec(1) Flask Web(1) nacos(1) Android Studio(4) 迪杰斯特拉(1) seata(1) cv2(1) OpenGL(1) 三角函数(1) MyBatis(5)
You might like
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
php实现博客，论坛图片防盗链的方法
2016/10/15 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
angularjs $http调用接口的方式详解
2018/08/13 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
Python fileinput模块使用实例
2015/05/28 Python
python实现简单socket通信的方法
2016/04/19 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python异步存储数据详解
2019/03/19 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
python dict如何定义
2020/09/02 Python
德国汽车零件和汽车配件网上商店：kfzteile24
2018/11/14 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
关于工资低的辞职信
2014/01/14 职场文书
小加工厂管理制度
2014/01/21 职场文书
初中新生军训方案
2014/05/13 职场文书
租赁协议书
2015/01/27 职场文书
报案材料怎么写
2015/05/25 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang
Python如何加载模型并查看网络
2022/07/15 Python