html5 jquery 鼠标拖动例子,jquery实现鼠标拖动实现DIV排序示例代码
先上效果图:
对比传统的排序,这是一个很不错的尝试,希望对大家有启发。
大家可以参考我的上一篇博文://www.jb51.net/article/42087.htm
html部分:
- 指标:
注:可以通过拖动来改变指标顺序(不含任务开始时间和任务结束时间指标)。
序号:1
指标名称:
时限: 分钟
预警时间:分钟
序号:2指标名称:
时限: 分钟
预警时间:分钟
JS部分:
//添加指标
function addevaluate(){
var n = $(".evaluate_name").size();
var html = '';
html = "
html += " 时限: 分钟";
html += " 预警时间:分钟";
html += "
";
$("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
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;
}
html5 jquery 鼠标拖动例子,jquery实现鼠标拖动实现DIV排序示例代码相关推荐
- android div拖动排序,鼠标拖动实现DIV排序示例代码
先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文:https://www.jb51.net/article/42087.htm html部分: 指标: ...
- linux ipc shmget 例子,Linux IPC之共享内存C 事例(示例代码)
简介 共享内存(shared memory)是最简单的Linux进程间通信方式之一.使用共享内存,不同进程可以对同一块内存进行读写.由于所有进程对共享内存的访问就和访问自己的内存空间一样,而不需要进行 ...
- c语言强制转换例子,关于强制类型转换(c语言)(示例代码)
因为今天看的代码中用到了结构体的强制类型转换,就很想了解一下结构体的强制类型转换是怎样的. 一个结构体如下: 在下面这段代码中rbuf->reqCmdBuf是一个空指针,首先将这个空指针赋值给一 ...
- jQuery特效 | 导航底部横线跟随鼠标缓动
jQuery特效 | 导航底部横线跟随鼠标缓动 2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例: 横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置. 今天就针对该 ...
- 鼠标跟随事件jQuery
穿透石头的水滴,它的力量来源于日积月累. 上一篇博客介绍了jQuery事件,今天用jQuery事件编写一个小案例 希望对有需要的小伙伴有所帮助. 鼠标跟随时间 图片随着鼠标的移动而移动 <!DO ...
- html中鼠标移动有下拉图片,JQuery自适应全屏图片滚动鼠标上下滑动效果代码
特效描述:JQuery 自适应全屏 图片滚动 鼠标上下滑动效果.JQuery:全屏随鼠标滑动而滚动 代码结构 1. 引入JS 2. HTML代码 $(function(){ $('body,html' ...
- 鼠标悬浮事件 -jQuery hover()方法(layer.js)(layer.tips)
鼠标悬浮事件 -jQuery hover()方法代码: <!DOCTYPE html> <html lang="en"> <head><m ...
- html中鼠标悬停时间,jQuery悬停鼠标悬停/鼠标时间
我在 freakyleaf.co.uk/hoverfade/处有以下实例,当将鼠标悬停在图块上时,图块背景图像在600毫秒(.tile_img)上淡化1到0.25不透明度,然后文本在500毫秒(.ov ...
- jQuery实现点击图片放大,鼠标滑轮控制缩放
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- OVS 端口抽象层次(四十)
- Jmeter和LoadRunner的区别
- 互联网数据中心安全管理方案
- 解决Ubuntu下 Could NOT find CURL (missing: CURL_LIBRARY CURL_INCLUDE_DIR)
- 实例学习SSIS(一)--制作一个简单的ETL包
- 项目经理主要工作职责
- mybatis_user_guide(4) Mapper XML 文件
- android商品数量加减,微信小程序实现一个简单的商品数量加减案例
- 山东大学 2020级数据库系统 实验八、九
- opencv画线和文字
- 测试工程师因迟到和人事大吵一架,结果人事被开除
- 【学习OpenCV4】如何操作图像中的像素?
- hibernate 的SessionFactory的getCurrentSession 与 openSession() 的区别
- requests模块介绍
- 無題(後改為總有那麼一句話)
- Excel文件下载From Linux
- 在大于32GB或64GB容量的SD卡上使用NOOB安装树莓派 - Using NOOB on SD cards larger than 32GB or 64GB for Raspberry Pi...
- html符号中文含义大全特殊,中文标点符号大全名称
- Adobe Illustrator 中的路径查找器
- 计算机系统导论与计算机导论,计算机系统导论之学习心得