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插件制作的排班页面,左边新建一系列组和组员,可以将人员直接拖拽至右边的日历上,不...
  • cc_blog
  • cc_blog
  • 2016年12月15日 13:15
  • 7141

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

一键排班时代到来

每月一次的排班次次都需要花三个小时,身心痛苦,在两个sheet表之间查找复制黏贴姓名和电话也是个闹心的活儿…现在做出了软件,排个班是秒秒钟的事儿,还能导出EXCEL,效率提升了百万倍!优哉游哉 ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

如何 安装Yii2的高级应用程序模板

1.通过composer 安装高级版 C:wampwwwyii>composer create-project --prefer-dist yiisoft/yii2-app-advanced adv...
  • youngqj
  • youngqj
  • 2015年06月30日 00:30
  • 11301

Yii2简介以及高级模板安装

1.Yii2的简介 1.1.Yii2 是什么 Yii2 是一个高性能,基于组件的 PHP 框架,用于快速开发现代 Web 应用程序。 名字 Yii2 (读作 易)在中文里有“极致简单与...

js jquery 实现 排班,轮班,日历,日程。使用fullcalendar 插件

如果想用fullcalendar实现排班功能,或者日历、日程功能。那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接 一、下载及简单配置...

Jquery按月生成日历排班.zip

  • 2016年09月12日 08:34
  • 34KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery拖拽排班
举报原因:
原因补充:

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