关闭

jquery拖拽排班

1788人阅读 评论(0) 收藏 举报

<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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2718次
    • 积分:46
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档
    阅读排行
    评论排行