temp.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <!DOCTYPE html>
  2. <html lang = "en">
  3. <head>
  4. <meta charset = "UTF-8">
  5. <title>TEMP</title>
  6. <link rel = "stylesheet" href = "./css/style.css">
  7. <link rel = "stylesheet" href = "./css/bootstrap.min.css">
  8. <!--需要的JS文件-->
  9. <script src = "./js/jquery-1.12.1.min.js"></script>
  10. <script src = "./js/jquery-ui.js"></script>
  11. <script src = "./js/jquery.ui.touch-punch.min.js"></script>
  12. <script src = "./js/bootstrap.min.js"></script>
  13. <script src = "./js/global.js"></script>
  14. <script src = "./js/function.js"></script>
  15. <script>
  16. $(function () {
  17. $("ul").sortable({
  18. revert: true, //是否使用一个流畅的动画还原到它的新位置
  19. connectWith: ".connectedSortable", //关联在一起的所有可排序对象
  20. placeholder: "sortable-placeholder",//在新位置占位的元素
  21. containment: "#task", //被拖动元素可移动的范围
  22. cursor: "move", //拖动过程中鼠标样式
  23. items: "> li", //可排序的父级元素下哪些子元素可以被排序
  24. opacity: 0.8, //被拖动的Helper在移动过程中的透明度
  25. handle: ".task-name, .task-head" //可以执行拖动的目标元素
  26. });
  27. $('[data-toggle="tooltip"]').tooltip()
  28. });
  29. </script>
  30. </head>
  31. <body>
  32. <!--页头导航区域-->
  33. <div id = "header">
  34. <div class = "container">
  35. <div id = "logo">SCRUM</div>
  36. <nav>
  37. <a class = "nav-item active">Task</a> <a class = "nav-item">Project</a>
  38. <a class = "nav-item">Member</a> <a class = "nav-item">About</a>
  39. </nav>
  40. </div>
  41. </div>
  42. <!--任务表格区域-->
  43. <div id = "task" class = "container">
  44. <table>
  45. <!--任务表格的表头区域-->
  46. <tr class = "th-task">
  47. <th class = "th-member">MEMBER</th>
  48. <th class = "th-todo">TODO</th>
  49. <th class = "th-doing">DOING</th>
  50. <th class = "th-done">DONE</th>
  51. </tr>
  52. <!--任务表格的的任务列表区域-->
  53. <tr class = "tb-task">
  54. <td>保需</td>
  55. <td>
  56. <ul class = "connectedSortable task-todo">
  57. <li>
  58. <div class = "task-head"></div>
  59. <div class = "task-name">测试一下看看</div>
  60. <div class = "task-more" data-toggle = "tooltip" data-placement = "right" title = "Tooltip on right">
  61. 03-26
  62. </div>
  63. </li>
  64. <li>
  65. <div class = "task-head"></div>
  66. <div class = "task-name">测试一下看看</div>
  67. <div class = "task-more"></div>
  68. </li>
  69. <li>
  70. <div class = "task-head"></div>
  71. <div class = "task-name">测试一下看看</div>
  72. <div class = "task-more"></div>
  73. </li>
  74. <li>
  75. <div class = "task-head"></div>
  76. <div class = "task-name">测试一下看看</div>
  77. <div class = "task-more"></div>
  78. </li>
  79. </ul>
  80. </td>
  81. <td>
  82. <ul class = "connectedSortable task-doing">
  83. <li>
  84. <div class = "task-head"></div>
  85. <div class = "task-name">测试一下看看</div>
  86. <div class = "task-more"></div>
  87. </li>
  88. <li>
  89. <div class = "task-head"></div>
  90. <div class = "task-name">测试一下看看</div>
  91. <div class = "task-more"></div>
  92. </li>
  93. <li>
  94. <div class = "task-head"></div>
  95. <div class = "task-name">测试一下看看</div>
  96. <div class = "task-more"></div>
  97. </li>
  98. </ul>
  99. </td>
  100. <td>
  101. <ul class = "connectedSortable task-done"></ul>
  102. </td>
  103. </tr>
  104. <tr class = "tb-task">
  105. <td>保需</td>
  106. <td>
  107. <ul class = "connectedSortable task-todo">
  108. <li>
  109. <div class = "task-head"></div>
  110. <div class = "task-name">测试一下看看测试一下看看测试一下看看测试一下看看</div>
  111. <div class = "task-more" data-toggle = "tooltip" data-placement = "right" title = "Tooltip on right">
  112. 03-26
  113. </div>
  114. </li>
  115. <li>
  116. <div class = "task-head"></div>
  117. <div class = "task-name">测试一下看看</div>
  118. <div class = "task-more"></div>
  119. </li>
  120. <li>
  121. <div class = "task-head"></div>
  122. <div class = "task-name">测试一下看看</div>
  123. <div class = "task-more"></div>
  124. </li>
  125. <li>
  126. <div class = "task-head"></div>
  127. <div class = "task-name">测试一下看看</div>
  128. <div class = "task-more"></div>
  129. </li>
  130. </ul>
  131. </td>
  132. <td>
  133. <ul class = "connectedSortable task-doing">
  134. <li>
  135. <div class = "task-head"></div>
  136. <div class = "task-name">测试一下看看</div>
  137. <div class = "task-more"></div>
  138. </li>
  139. <li>
  140. <div class = "task-head"></div>
  141. <div class = "task-name">测试一下看看</div>
  142. <div class = "task-more"></div>
  143. </li>
  144. <li>
  145. <div class = "task-head"></div>
  146. <div class = "task-name">测试一下看看</div>
  147. <div class = "task-more"></div>
  148. </li>
  149. </ul>
  150. </td>
  151. <td>
  152. <ul class = "connectedSortable task-done"></ul>
  153. </td>
  154. </tr>
  155. <!--任务表的新增行,用于点击添加任务之后,新增独立一行-->
  156. <tr class = "add-task">
  157. <td>
  158. <div class = "dropdown">
  159. <button class = "btn btn-default dropdown-toggle" type = "button" id = "dropdownMenu" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
  160. 添加成员 <span class = "caret"></span>
  161. </button>
  162. <ul class = "dropdown-menu" aria-labelledby = "dropdownMenu">
  163. <li><a href = "#">陈保需</a></li>
  164. <li><a href = "#">董菲</a></li>
  165. <li><a href = "#">王佳颖</a></li>
  166. <li><a href = "#">孔蓉</a></li>
  167. <li><a href = "#">董菲</a></li>
  168. <li><a href = "#">王佳颖</a></li>
  169. <li><a href = "#">孔蓉</a></li>
  170. <li><a href = "#">董菲</a></li>
  171. <li><a href = "#">王佳颖</a></li>
  172. <li><a href = "#">孔蓉</a></li>
  173. </ul>
  174. </div>
  175. </td>
  176. <td></td>
  177. <td></td>
  178. <td></td>
  179. </tr>
  180. <!--任务表格最后一行,用于添加任务和人员的占位-->
  181. <tr class = "tf-task">
  182. <td><a></a></td>
  183. <td></td>
  184. <td></td>
  185. <td></td>
  186. </tr>
  187. </table>
  188. </div>
  189. <!--页面尾部区域-->
  190. <footer id = "footer">
  191. <p>Scrum by <a href = "http://git.bxthing.com/Scrum.git/" target = "_blank">Baoxu</a> @ 2016
  192. </p>
  193. </footer>
  194. </body>
  195. </html>