首页
所有分类
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学习笔记2 函数
Jan 11 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
jquery常用的12个小功能
Jul 22 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 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) UV(1) 内存(1) 进程假死(1) 策略(1) PV(1) 访问日志(2) 弱口令(1) 线程(1) ipv6(1)
You might like
如何分别全角和半角以避免乱码
2006/10/09 PHP
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
js的Boolean对象初始值示例
2014/03/04 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
pandas string转dataframe的方法
2018/04/11 Python
python+opencv实现阈值分割
2018/12/26 Python
python语言基本语句用法总结
2019/06/11 Python
Django CBV类的用法详解
2019/07/26 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python高阶函数map（）和reduce（）实例解析
2020/03/16 Python
python 爬虫请求模块requests详解
2020/12/04 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
STRATHBERRY苏贝瑞包包官网：西班牙高级工匠手工打造
2020/11/10 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
初中科学教学反思
2014/01/21 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
八一建军节慰问信
2015/02/14 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
绿里奇迹观后感
2015/06/15 职场文书
简历中的自我评价应该这样写！
2019/07/12 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL