jquery拖拽排班

原创 2011年01月13日 18:04:00

<html>
 <head>
  <meta name="author" content="Darko Bunic"/>
  <meta name="description" content="Drag and drop table content with JavaScript"/>
  <link rel="stylesheet" href="css/style2.css" type="text/css" media="screen" />
  <script type="text/javascript" src="js/redips-drag-min.js"></script>
  <!-- initialize drag and drop -->
  <script type="text/javascript">
   window.onload = function () {
    // initialization
    REDIPS.drag.init();
    // dragged elements can be placed to the empty cells only (disable more than one element in the same table cell)
    REDIPS.drag.drop_option = 'single';
    // set hover color
    REDIPS.drag.hover_color = '#9BB3DA';
    // don't ask on delete
    REDIPS.drag.trash_ask = false;
    // this function (event handler) is called after element is dropped
    REDIPS.drag.myhandler_dropped = function () {
     var obj         = REDIPS.drag.obj;      // reference to the dragged OBJect
     var obj_old     = REDIPS.drag.obj_old;     // reference to the original object
     var target_cell = REDIPS.drag.target_cell;    // reference to the Target cell
     var target_row  = REDIPS.drag.target_cell.parentNode; // reference to the Target row
     var marked_cell = REDIPS.drag.marked_cell;    // reference to the meaning (deny/allow) of marked cells
     var mark_cname  = REDIPS.drag.mark_cname;    // reference to the name of marked cells
     var i, obj_new, mark_found, id;       // local variables
     // if checkbox is checked and original element is "clone" type then clone school subject to the week
     if (document.getElementById('week').checked === true && obj_old.className.indexOf('clone') > -1) {
      // loop through table cells
      for (i = 0; i < target_row.cells.length; i++) {
       // skip table cell where DIV element is dropped
       if (target_cell === target_row.cells[i]){
        continue;
       }
       // skip if table cell is not empty
       if (target_row.cells[i].childNodes.length > 0) {
        continue;
       }
       // search for 'mark' class name
       mark_found = target_row.cells[i].className.indexOf(mark_cname) > -1 ? true : false;
       // if current cell is marked and access type is 'deny' or current cell isn't marked and access type is 'allow'
       // then skip this table cell
       if ((mark_found === true && marked_cell === 'deny') || (mark_found === false && marked_cell === 'allow')) {
        continue;
       }
       // clone DIV element
       obj_new = obj.cloneNode(true);
       // set id (first two characters are id of original element)
       id = obj.id.substring(0, 2);
       // set id for cloned element
       obj_new.id = id + 'c' + REDIPS.drag.cloned_id[id];
       // set reference to the DIV container
       obj_new.redips_container = obj.redips_container;
       // increment cloned_id for cloned element
       REDIPS.drag.cloned_id[id] += 1;
       // set onmousedown event on cloned object
       obj_new.onmousedown = REDIPS.drag.handler_onmousedown;
       // append to the table cell
       target_row.cells[i].appendChild(obj_new);
      }
     }
    }
   }
  </script>
 </head>
 <body>
  <center>
   <h1></h1>
   <h2>120急救中心员工排班系统</h2>
  </center>
  <div>  <!-- <div id="main_container"> -->
   <!-- tables inside this DIV could have draggable content -->
   <div id="drag">
    <!-- up container -->
    <div id="left">
     <table id="table1">
      <tbody>
       <tr>
       <td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td>
       <td class="dark"><div id="doctor" class="drag green clone">医生</div></td>
       <td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td>
       <td class="dark"><div id="danjiayuan" class="drag red clone">担架员</div></td>
       <td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td>
       <td class="dark"><div id="siji" class="drag orange clone">司机</div></td>
       <td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td><td class="dark"><div></div></td>
       <td class="trash" title="Trash">垃圾桶</td>
       </tr>
      </tbody>
     </table>
    </div>
    <!-- up container -->
    <!-- dwon container -->
    <div id="right">
     <table id="">
      <tbody>
       <tr>
        <!-- if checkbox is checked, clone school subjects to the whole table row  -->
        <td  width="180" class="mark" rowspan="2"><input id="week" type="checkbox" title="克隆员工"/><br/>车牌号</td>
        <td  width="120" class="mark" colspan="2">2011-01-01</td>
        <td  width="120" class="mark" colspan="2">2011-01-02</td>
        <td  width="120" class="mark" colspan="2">2011-01-03</td>
        <td  width="120" class="mark" colspan="2">2011-01-04</td>
        <td  width="120" class="mark" colspan="2">2011-01-05</td>
        <td  width="120" class="mark" colspan="2">2011-01-06</td>
        <td  width="120" class="mark" colspan="2">2011-01-07</td>
        <td  width="120" class="mark" colspan="2">2011-01-08</td>
        <td  width="120" class="mark" colspan="2">2011-01-09</td>
        <td  width="120" class="mark" colspan="2">2011-01-10</td>
        <td  width="120" class="mark" colspan="2">2011-01-11</td>
       </tr>
       <tr>
           <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
        <td width="120" class="mark">早班</td>
        <td width="120" class="mark">晚班</td>
       </tr>
       <tr>
        <td width="120" rowspan="3" class="mark">A-001</td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
       </tr>
       <tr>
        <td  style="background-color: #eee"></td>
        <td  style="background-color: #eee"></td>
        <td  style="background-color: #eee"></td>
        <td  style="background-color: #eee"></td>
        <td  style="background-color: #eee"></td>
        <td  style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
       </tr>
       <tr>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
       </tr>
       <tr>
        <td width="120" rowspan="3" class="mark">B-002</td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
       </tr>
       <tr>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
       </tr>
       <tr>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
       </tr>
       <tr>
        <td width="120" rowspan="3" class="mark">C-003</td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
        <td style="background-color: #C6C8CB"></td>
       </tr>
       <tr>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
        <td style="background-color: #eee"></td>
       </tr>
       <tr>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
        <td class="drag t3"></td>
       </tr>
      </tbody>
     </table>
    </div>
    <!-- dwon container -->
   </div>
   <!-- drag container -->
   <div id="message">.</div>
  </div>
  <!-- main container -->
 </body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

两款超好用js日历插件(fullcalendar和zabuto_calendar)

这两款插件特别类似,其实用其中一款即可。 先展示一下我用这两款插件制作的排班系统 这个是fullcalendar插件制作的排班页面,左边新建一系列组和组员,可以将人员直接拖拽至右边的日历上,不...

Qt 4 访问 mysql 数据库的简单教程

环境:Windows XP          qt-sdk-win-opensource-2009.02.exe(Qt Creator 1.1.0)= Qt 4.5.1   ...
  • zyx425
  • zyx425
  • 2011-05-26 21:26
  • 1250

迄今为止最通俗易懂的MVP架构讲解

从MVC到MVP再到MVVP,相信大家就已经听说过这些架构了。但你真正应用到哪个阶段了呢?是不是还苦于网上对MVP晦涩的讲解?今天,Coder哥就用最通俗易懂的方式告诉你,MVP怎么用!先上一张MVP...

如何更高效的使用MVP以及官方MVP架构解析

转载请标明出处: http://blog.csdn.net/dantestones/article/details/51445208 Android mvp 架构的自述中我简单的介绍了mvp,...

一个简单的图片拖拽排序效果 &nbsp; ----- &nbsp; JQUERY特效模板

最近不是特忙,整理一下之前做的一些效果的代码,搞一些模板出来方便之后使用,很多效果完整版已经找不到了,只能找到一些只兼容某些浏览器的版本十分遗憾,所以以后应该多多整理。 效果如下: ​ ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)