<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖动排序</title>
<style type="text/css">
#leftArea{width:100%;height:32px;}
#leftArea .area_item{float:left;width:auto;height:32px;padding:0px 10px;margin:0px 5px;background:#e1e1e1;font:normal 18px/32px '微软雅黑';color:#333;}
#leftArea .area_item_more{float:left;width:auto;height:32px;padding:0px 10px;margin:0px 5px;background:#e1e1e1;font:normal 18px/30px '微软雅黑';color:#333;cursor:pointer;}
#leftArea .area_item_more:hover{background:#377ad1;color:#fff;}
.areaCustomMark{display:none;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:10001;-moz-opacity:0.5;opacity:0.50;}
.areaCustom{display:none;width:690px;min-height:518px;height:auto;font-size:14px;position:absolute;top:140px;left:calc(50% - 345px);z-index:10002;background-color:#fff;border-radius:3px;user-select:none;}
.areaCustom .areaCustom-header{width:690px;height:45px;background-color:#377bd1;border-top-left-radius:3px;border-top-right-radius:3px;}
.areaCustom .areaCustom-header .header-icon{float:left;width:20px;height:45px;margin-left:30px;background:url("image/icon-setup.png") center center no-repeat;}
.areaCustom .areaCustom-header .header-label{float:left;height:45px;margin-left:5px;font:normal 16px/45px '微软雅黑';color:#fff;}
.areaCustom .areaCustom-header .header-close{float:right;width:30px;height:45px;background:url("image/icon-quxiao.png") center center no-repeat;cursor:pointer;}
.areaCustom .areaCustom-content{width:644px;min-height:200px;height:auto;padding:14px 23px 8px 23px;}
.areaCustom .areaCustom-content .area-label{width:644px;height:42px;padding-left:17px;font:bold 14px/42px '微软雅黑';color:#377ad1;background:url("image/icon-rect-blue.png") 7px center no-repeat;}
.areaCustom .areaCustom-content .area-custom{width:644px;min-height:152px;height:auto;position:relative;}
.areaCustom .areaCustom-content .area-custom .areaSelect{width:78px;height:42px;padding:7px;position:absolute;z-index:10003;}
.areaCustom .areaCustom-content .area-custom .areaSelect .a-name{width:78px;height:42px;border-radius:3px;background-color:#f5f5f5;font:normal 12px/42px '微软雅黑';color:#333;text-align:center;overflow:hidden;cursor:pointer;}
.areaCustom .areaCustom-content .area-custom .areaSelect.active .a-name{box-shadow: 0px 0px 5px #377ad1;}
.areaCustom .areaCustom-content .area-custom .up{top:0px;}
.areaCustom .areaCustom-content .area-custom .up .a-icon{width:20px;height:20px;top:0px;right:0px;background:url("image/icon-cancel.png") center center no-repeat;position:absolute;cursor:pointer;z-index:10009;}
.areaCustom .areaCustom-content .area-custom .areaSelect.up.borderL{background:url("image/border-left.png") left 0px no-repeat;}
.areaCustom .areaCustom-content .area-custom .areaSelect.up.borderR{background:url("image/border-right.png") right 0px no-repeat;}
.areaCustom .areaCustom-content .area-custom .centerLine{width:630px;height:14px;top:69px;left:0px;position:absolute;}
.areaCustom .areaCustom-content .area-custom .centerLine .l-left{float:left;width:178px;height:1px;margin-top:6.5px;background-color:#f7f7f7;}
.areaCustom .areaCustom-content .area-custom .centerLine .l-center{float:left;width:274px;height:14px;font:normal 14px/14px '微软雅黑';color:#333;text-align:center;}
.areaCustom .areaCustom-content .area-custom .centerLine .l-right{float:left;width:178px;height:1px;margin-top:6.5px;background-color:#f7f7f7;}
.areaCustom .areaCustom-content .area-custom .down{top:96px;}
.areaCustom .areaCustom-content .area-custom .down .a-icon{width:20px;height:20px;top:0px;right:0px;background:url("image/icon-add.png") center center no-repeat;position:absolute;cursor:pointer;z-index:10009;}
.areaCustom .areaCustom-content .area-custom .down1{top:96px;}
.areaCustom .areaCustom-content .area-custom .down2{top:152px;}
.areaCustom .areaCustom-content .area-custom .down3{top:208px;}
.areaCustom .areaCustom-content .area-custom .orderNo-0{left:0px;}
.areaCustom .areaCustom-content .area-custom .orderNo-1{left:92px;}
.areaCustom .areaCustom-content .area-custom .orderNo-2{left:184px;}
.areaCustom .areaCustom-content .area-custom .orderNo-3{left:276px;}
.areaCustom .areaCustom-content .area-custom .orderNo-4{left:368px;}
.areaCustom .areaCustom-content .area-custom .orderNo-5{left:460px;}
.areaCustom .areaCustom-content .area-custom .orderNo-6{left:552px;}
.areaCustom .areaCustom-content .area-custom .orderNo-7{left:644px;}
.areaCustom .areaCustom-content .area-custom .orderNo-8{left:736px;}
.areaCustom .areaCustom-content .message{width:644px;height:19px;padding-left:31px;margin-top:27px;font:bold 12px/19px '微软雅黑';color:#ff0000;background:url("image/icon-marks.png") 7px center no-repeat;}
.areaCustom .areaCustom-bottom{width:690px;height:30px;padding:30px 0px 40px 0px;}
.areaCustom .areaCustom-bottom .button{float:left;width:78px;height:30px;border-radius:4px;padding-left:36px;font:normal 14px/30px '微软雅黑';color:#fff;cursor:pointer;}
.areaCustom .areaCustom-bottom #areabuttom_bc{margin-left:124px;background:url("image/icon-queren.png") 12px center no-repeat;background-color:#3c7cd3;}
.areaCustom .areaCustom-bottom #areabuttom_qx{margin-left:50px;background:url("image/icon-close.png") 12px center no-repeat;background-color:#3c7cd3;}
.areaCustom .areaCustom-bottom #areabuttom_mr{margin-left:50px;background:url("image/icon-reset.png") 12px center no-repeat;background-color:#3c7cd3;}
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript">
var areaDefaultList = [
{"acode": "ACHN", "type": "area", "name": "全国"},
{"acode": "ACCN", "type": "area", "name": "华中"},
{"acode": "AECN", "type": "area", "name": "华东"},
{"acode": "ANCN", "type": "area", "name": "华北"},
{"acode": "ANEC", "type": "area", "name": "东北"},
{"acode": "ANWC", "type": "area", "name": "西北"},
{"acode": "ASCN", "type": "area", "name": "华南"},
{"acode": "ASWC", "type": "area", "name": "西南"},
{"acode": "ABCJ", "type": "area", "name": "长江流域"},
{"acode": "ABHH", "type": "area", "name": "黄淮流域"},
{"acode": "ACES", "type": "area", "name": "东南沿海"}
];
var userCustomList = [];
var userUnCustomList = [];
var maxCustomCount = 7;//最多显示7个地区
var customDivWidth = 92;//拖动div块的宽度
var customDivHeight = 56;//拖动div块的高度
//初始化区域定制
$(function(){
initAreaList();//初始化雷达区域列表
initAreaCustom();//初始化雷达区域定制
$(".areaCustom .header-close, #areabuttom_qx").click(function () {//取消区域定制
$(".areaCustomMark").css("display", "none");
$(".areaCustom").css("display", "none");
getCustomCookies();
initAreaCustom();//初始化雷达区域定制
})
$("#areabuttom_bc").click(function () {//保存区域定制
$(".areaCustomMark").css("display", "none");
$(".areaCustom").css("display", "none");
initAreaList();
})
$("#areabuttom_mr").click(function () {//区域定制恢复默认状态
toDefaultAreaCustom();
})
});
//初始化雷达区域列表
function initAreaList(){
var html = "";
if(typeof(userCustomList)!='object' || userCustomList==null || userCustomList.length==0){
for(var i=0; i<areaDefaultList.length && i<maxCustomCount; i++){
if(i==0){
html += "<div class='area_item active' type='"+areaDefaultList[i].type+"' id='"+areaDefaultList[i].acode+"' title='"+areaDefaultList[i].name+"'>"+areaDefaultList[i].name+"</div>";
}else{
html += "<div class='area_item' type='"+areaDefaultList[i].type+"' id='"+areaDefaultList[i].acode+"' title='"+areaDefaultList[i].name+"'>"+areaDefaultList[i].name+"</div>";
}
}
}else{
for(v
拖动排序.zip （13个子文件） 
拖动排序 image 
icon-marks.png 1KB icon-cancel.png 497B border-right.png 3KB icon-rect-blue.png 117B border-left.png 3KB icon-reset.png 1KB icon-add.png 385B icon-close.png 1KB icon-quxiao.png 236B icon-queren.png 1KB icon-setup.png 1KB
拖动排序.html 19KB js 
jquery.js 91KB
RainingTime
- 粉丝: 56
- 资源: 15
最新资源
- (源码)基于Spring Boot框架的博客系统.zip
- (源码)基于Spring Boot框架的博客管理系统.zip
- (源码)基于ESP8266和Blynk的IR设备控制系统.zip
- (源码)基于Java和JSP的校园论坛系统.zip
- (源码)基于ROS Kinetic框架的AGV激光雷达导航与SLAM系统.zip
- (源码)基于PythonDjango框架的资产管理系统.zip
- (源码)基于计算机系统原理与Arduino技术的学习平台.zip
- (源码)基于SSM框架的大学消息通知系统服务端.zip
- (源码)基于Java Servlet的学生信息管理系统.zip
- (源码)基于Qt和AVR的FestosMechatronics系统终端.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0