jquery-ui实现可拖动的甘特图效果代码
代码语言:html
所属分类:图表
代码描述:jquery-ui实现可拖动的甘特图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script> <style> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; } body { line-height: 1; } :focus { outline: 1; } article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; } nav ul { list-style: none; box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } table { border-collapse: collapse; border-spacing: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; margin: 0; padding: 0; } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css"> <style type="text/css"> .table-box { padding: 15px; text-align: center; font-size: 14px; } .table { border: 1px solid #ddd; border-style: solid solid none solid; border-radius: 8px; display: inline-block; max-width: 1200px; overflow: auto; } .table-body { width: 3470px; } .table .tr:last-of-type { border-radius: 8px; } .tr { border: 1px solid #ddd; border-style: none none solid none; } .tr:hover { background-color: #F5F5F5; /*cursor: pointer;*/ } .tr:after { content: ''; width: 0; height: 0; display: block; clear: both; } .tr-left, .tr-right { position: relative; float: left; } .tb .tr-right { min-width: 3264px; min-height: 30px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAACCAYAAADhEnrDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI5QTUwNkQ2MDZGNDExRThCN0VFRDc0RjJCREQ0NDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI5QTUwNkQ3MDZGNDExRThCN0VFRDc0RjJCREQ0NDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjlBNTA2RDQwNkY0MTFFOEI3RUVENzRGMkJERDQ0MjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjlBNTA2RDUwNkY0MTFFOEI3RUVENzRGMkJERDQ0MjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7IiSj+AAAAHElEQVR42mL8//8/wyiAgHv37v1nHA0QVAAQYABogQmWn3ZT/gAAAABJRU5ErkJggg==); background-size: auto 2px; } .tb .tr-right .td { border: 1px solid #ddd; border-style: none dotted none none; } .td { float: left; width: 68px; height: 30px; line-height: 30px; border: 1px solid #ddd; border-style: none solid none none; } .tr-left .td:last-of-type { border: 1px solid dimgray; border-style: none solid none none; } .tr-right .td:last-of-type { border-style: none; } .dragItem { position: absolute; height: 100%; line-height: 30px; display: inline-block; background-color: crimson; opacity: 0.2; color: white; left: 0; cursor: move; min-width: 5px; overflow: hidden; } .dragBox { width: 100%; height: 100%; position: relative; } .day-title0, .day-title1 { width: 1632px; color: brown; } .day-title0 { background-color: #DDDDDD; } .day-title1 { background-color: beige; } ::-webkit-scrollbar { width: 12px; height: 12px; background-color: #f5f5f5; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); border-radius: 10px; background-color: darkgray; } ::-webkit-scrollbar-thumb { height: 20px; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: dimgrey; } .rightLine { width: 5px; height: 100%; position: absolute; top: 0; right: 0 !important; float: right !important; background-color: #1E90FF; cursor: e-resize; } </style> </head> <body> <div class="table-box"> <div class="table"> <div class="table-body"> <div class="tr tb"> <div class="tr-left"> <div class="td" style="width: 204px;"></div> </div> <div class="tr-right"> <div class="td day-title0"> 今天 </div> <div class="td day-title1"> 明天 </div> </div> </div> <div class="tr"> <div class="tr-left"> <div class="td"> 编号 </div> <div class="td"> 司机 </div> <div class="td"> 时间 </div> </div> <div class="tr-right"> <div class="td"> 00:00 </div> <div class="td"> 00:30 </div> <div class="td"> 01:00 </div> <div class="td"> 01:30 </div> <div class="td"> 02:00 </div> <div class="td"> 02:30 </div> <div class="td"> 03:00 </div> <div class="td"> 03:30 </div> <div class="td"> 04:00 </div> <div class="td"> 04:30 </div> <div class="td"> 05:00 </div> <div class="td"> 05:30 </div> <div class="td"> 06:00 </div> <div class="td"> 06:30 </div> <div class="td"> 07:00 </div> <div class="td"> 07:30 </div> <div class="td"> 08:00 </div> <div class="td"> 08:30 </div> <div class="td"> 09:00 </div> <div class="td"> 09:30 </div> <div class="td"> 10:00 </div> <div class="td"> 10:30 </div> <div class="td"> 11:00 </div> <div class="td"> 11:30 </div> <div class="td"> 12:00 </div> <div class="td"> 12:30 </div> <div class="td"> 13:00 </div> <div class="td"> 13:30 </div> <div class="td"> 14:00 </div> <div class="td"> 14:30 </div> <div class="td"> 15:00 </div> <div class="td"> 15:30 </div> <div class="td"> 16:00 </div> <div class="td"> 16:30 </div> <div class="td"> 17:00 </div> <div class="td"> 17:30 </div> <div class="td"> 18:00 </div> <div class="td"> 18:30 </div> <div class="td"> 19:00 </div> <div class="td"> 19:30 </div> <div class="td"> 20:00 </div> <div class="td"> 20:30 </div> <div class="td"> 21:00 </div> <div class="td"> 21:30 </div> <div class="td"> 22:00 </div> <div class="td"> 22:30 </div> <div class="td"> 23:00 </div> <div class="td"> 24:00 </div> </div> </div> <div class="tr tb"> <div class="tr-left&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0