JQuery对元素拖拽排序，元素拖拽，JQuery拖拽Demo_jquery表格拖拽排序资源-CSDN文库

共13个文件

png：11个

js：1个

html：1个

jquery

javascript

ecmascript

需积分: 5 82 浏览量 2022-04-09 16:24:28 上传评论收藏 49KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

拖动排序.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

jquery.js 91KB

<!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