| <!DOCTYPE html> | 
| <html lang="zh"> | 
| <head> | 
|     <th:block th:include="include :: header('拖动排序')" /> | 
| </head> | 
| <body class="gray-bg"> | 
|     <div class="wrapper wrapper-content  animated fadeInRight"> | 
|         <div class="row"> | 
|             <div class="col-sm-4"> | 
|                 <div class="ibox"> | 
|                     <div class="ibox-content"> | 
|                         <h3>任务列表</h3> | 
|                         <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p> | 
|   | 
|                         <div class="input-group"> | 
|                             <input type="text" placeholder="添加新任务" class="input input-sm form-control"> | 
|                             <span class="input-group-btn"> | 
|                                         <button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> 添加</button> | 
|                                 </span> | 
|                         </div> | 
|   | 
|                         <ul class="sortable-list connectList agile-list"> | 
|                             <li class="warning-element"> | 
|                                 加强过程管理,及时统计教育经费使用情况,做到底码清楚, | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标签</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.01 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="success-element"> | 
|                                 支持财会人员的继续培训工作。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.05.12 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="info-element"> | 
|                                 协同教导处搞好助学金、减免教科书费的工作。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.10 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="danger-element"> | 
|                                 要求会计、出纳人员严格执行财务制度,遵守岗位职责,按时上报各种资料。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-primary">确定</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.06.10 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="warning-element"> | 
|                                 做好职工公费医疗工作,按时发放门诊费。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标签</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.09 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="warning-element"> | 
|                                 有计划地把课本复习三至五遍。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-primary">确定</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.08.04 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="success-element"> | 
|                                 看一本高质量的高中语法书 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.05.12 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="info-element"> | 
|                                 选择一份较好的英语报纸,通过阅读提高英语学习效果。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.10 | 
|                                 </div> | 
|                             </li> | 
|                         </ul> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <div class="col-sm-4"> | 
|                 <div class="ibox"> | 
|                     <div class="ibox-content"> | 
|                         <h3>进行中</h3> | 
|                         <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p> | 
|                         <ul class="sortable-list connectList agile-list"> | 
|                             <li class="success-element"> | 
|                                 全面、较深入地掌握我们“产品”的功能、特色和优势并做到应用自如。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标签</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.01 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="success-element"> | 
|                                 根据自己以前所了解的和从其他途径搜索到的信息,录入客户资料150家。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.05.12 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="warning-element"> | 
|                                 锁定有意向客户20家。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.10 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="warning-element"> | 
|                                 力争完成销售指标。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标签</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.09 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="info-element"> | 
|                                 在总结和摸索中前进。 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-primary">确定</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.08.04 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="success-element"> | 
|                                 不断学习行业知识、产品知识,为客户带来实用介绍内容 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.05.12 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="danger-element"> | 
|                                 先友后单:与客户发展良好友谊,转换销售员角色,处处为客户着想 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.11.04 | 
|                                 </div> | 
|                             </li> | 
|                         </ul> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <div class="col-sm-4"> | 
|                 <div class="ibox"> | 
|                     <div class="ibox-content"> | 
|                         <h3>已完成</h3> | 
|                         <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p> | 
|                         <ul class="sortable-list connectList agile-list"> | 
|                             <li class="info-element"> | 
|                                 制定工作日程表 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.10 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="warning-element"> | 
|                                 每天坚持打40个有效电话,挖掘潜在客户 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标签</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.09 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="warning-element"> | 
|                                 拜访客户之前要对该客户做全面的了解(客户的潜在需求、职位、权限以及个人性格和爱好) | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标签</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.09.09 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="warning-element"> | 
|                                 提高自己电话营销技巧,灵活专业地与客户进行电话交流 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-primary">确定</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.08.04 | 
|                                 </div> | 
|                             </li> | 
|                             <li class="success-element"> | 
|                                 通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人 | 
|                                 <div class="agile-detail"> | 
|                                     <a href="#" class="pull-right btn btn-xs btn-white">标记</a> | 
|                                     <i class="fa fa-clock-o"></i> 2018.05.12 | 
|                                 </div> | 
|                             </li> | 
|   | 
|                         </ul> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|     </div> | 
|     <th:block th:include="include :: footer" /> | 
|     <script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script> | 
|     <script> | 
|         $(document).ready(function () { | 
|             $(".sortable-list").sortable({connectWith: ".connectList"}).disableSelection() | 
|         }); | 
|     </script> | 
| </body> | 
| </html> |