jquery一天24小时时间拖放安排表效果代码
代码语言:html
所属分类:拖放
代码描述:jquery一天24小时时间拖放安排表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #1d1e20; box-sizing: border-box; padding-top: 150px; padding-bottom: 50px; font-family: arial; min-width: 960px; } .intro { font-size: 30px; position: absolute; top: 60px; left: 140px; color: #fff; } .intro span { font-size: 15px; color: #00ffd4; } ul { user-select: none; } ul .name { width: 85px; height: 20px; line-height: 20px; text-align: right; padding-right: 5px; margin-right: 5px; margin-left: 10px; box-sizing: border-box; color: #ffffff; float: left; cursor: default; font-size: 12px; background: transparent; border: 0; outline: 0; transition: 0.3s; border-radius: 2px; } ul input:hover { background: #333333 !important; cursor: auto !important; } .timeline { width: 100%; height: 20px; margin-bottom: 14px; } .timeline li { display: block; float: left; width: 27px; height: 20px; background: #fd3e81; color: #ffffff; font-size: 12px; text-align: center; line-height: 20px; margin-right: 3px; user-select: none; cursor: default; border-radius: 2px; } .thing { width: 100%; height: 20px; margin-bottom: 4px; animation: load 0.5s ease-in; } .thing li { display: block; float: left; width: 7px; height: 20px; background: #333333; text-align: center; margin-right: 0px; border-right: 3px solid #1d1e20; cursor: pointer; border-radius: 0px; transition: 0.3s; } .thing li:hover { opacity: 0.5; } .thing .remove { color: #ffffff; font-size: 12px; height: 20px; line-height: 20px; cursor: pointer; padding: 0 10px; margin-left: 5px; background: #fd3e81; display: block; float: left; border-radius: 2px; opacity: 0.2; transition: 0.3s; user-select: none; } .thing .remove:hover { opacity: 1; } @keyframes load { from { opacity: 0; } } .template { display: none; } .addThing { color: #ffffff; font-size: 12px; width: 716px; transition: 0.3s; margin-left: 100px; text-align: center; border-radius: 2px; height: 30px; line-height: 30px; margin-top: 15px; cursor: pointer; } .addThing:hover { background: #333333; } </style> </head> <body > <h1 class="intro"> Design my day <span>by joacimnilsson.se</span> </h1> <ul class="timeline"> <div class="name">Hours</div> <li>00</li> <li>01</li> <li>02</li> <li>03</li> <li>04</li> <li>05</li> <li>06</li> <li>07</li> <li>08</li> <li>09</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> </ul> <ul class="thing template"> <input type="text" class="name" value="Example"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="remove">Remove</div> </ul> <div class="things"> <ul class="thing" value="#2AD33F"> <input type="text" class="name" value="Sleeping"> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="" style="background: rgb(51, 51, 51);"></li> <li class="" style="background: rgb(51, 51, 51);"></li> <li class="" style="background: rgb(51, 51, 51);"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <li class="active" style="background: rgb(42, 211, 63);"></li> <div class="remove">Remove</div> </ul> <ul class="thing" value="#EDF11A"> <input type="text" class="name" value="Travel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="active" style="background: rgb(237, 241, 26);"></li> <li class="active" style="background: rgb(237, 241, 26);"></li> <li class="active" style="background: rgb(237, 241, 26);"></li> <li class="" style="background: rgb(51, 51, 51);"></li> <li class="" style="background: rgb(51, 51, 51);"></li> <li class="" style="background: rgb(51, 51, 51);"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="active" style="background: rgb(237, 241, 26);"></li> <li class="active" style="background: rgb(237, 241, 26);"></li> <li class="active" style="background: rgb(237, 241, 26);"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="remove">Remove</div> </ul> <ul class="thing" value="#D3412A"> <input type="text" class="name" value="Working"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);"></li> <li class="active" style="background: rgb(211, 65, 42);&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0