jquery拖拽排班

最新推荐文章于 2024-05-21 18:59:54 发布
最新推荐文章于 2024-05-21 18:59:54 发布
阅读量3.3k 收藏
点赞数 1
文章标签： jquery class reference table c div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lisongqiu168/article/details/6135929
版权

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

lisongqiu168
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
FullCalendar 2.9 排课实例,课节，拖拽
08-11
FullCalendar 2.9 实现的排课页面，实现了课程展示，bootstrap弹框，layer浮动层展示功能
js 排班插件_非常棒的jQuery排版用插件
weixin_33142729的博客
01-14 522
一个网站的设计，排版是一个非常重要的组成部分。但它也常常被忽视。在这篇文章中，我编了最棒的jQuery插件，以便于来控制您的网站的排版。FitText.jsFitText是一个简单的jQuery插件，可以自动使文本适合它的父元素的宽度。Lettering.js虽然CSS3的@ font-face的指令已经有了明显的改善网页排版，它并没有提供完整的到字母的控制。这就是为什么要创建 Lettering...
jq插件写的日历排班表
weixin_42072260的博客
05-21 137
jq插件写的日历排班表
JQuery easyUI拖拽效果运用到排班
iteye_18177的博客
10-27 851
   最近做了一个医院的项目，项目中有一个功能是排班，具体的意思就是将某个医生或护士排在周几的门诊或病房值班，公司领导要求用拖动来实现排班，正好项目中运用的前台框架是easyUI,easyUI中有拖动的功能。     先截几张图让大家了解一下流程： 1.选择科室 2.点击排班按钮后进入排班页面 3.鼠标放到某个员工上时鼠标将变为可拖动的形状，可按住鼠标将其拖到想要放入的框中，效果如下...
Jquery按月生成日历排班.zip
09-12
Jquery按月生成日历排班，可排上午、下午、全天
拖拽-排班
fengkuangshl的博客
01-18 575
[code="javascript"] jQuery UI 放置（Droppable） ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } li { margin: 5px; padding...
jQuery拖拽元素特效代码
03-20
本主题聚焦于"jQuery拖拽元素特效代码"，这是一个常见的交互设计功能，用于提升用户体验，尤其在图像布局和布局调整的应用中。下面将详细阐述jQuery拖拽元素的核心原理、实现方法以及涉及到的技术点。 首先，jQuery...
一个非常牛的jquery做的日历，排班，添加提醒功能
06-02
一个非常牛的jquery做的日历，排班，添加提醒功能一个非常牛的jquery做的日历，排班，添加提醒功能一个非常牛的jquery做的日历，排班，添加提醒功能一个非常牛的jquery做的日历，排班，添加提醒功能一个非常牛的...
jquery拖拽排序插件div自由拖动排序代码
11-10
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...
jQuery拖拽div实现思路
10-26
在JavaScript的世界里，jQuery库提供了一种简便的方式来处理DOM操作，包括实现拖拽效果。本文将详细介绍如何使用jQuery实现div元素的拖拽功能，主要涉及`mousedown`、`mousemove`和`mouseup`这三个事件。 首先，...
jQuery拖动时间轴
06-01
标题“jQuery拖动时间轴”指的是使用jQuery库创建的一个交互式功能，允许用户在时间线上进行拖动操作，以选择特定时间段。这个功能通常应用于日程管理、事件调度或者数据分析等场景，使得用户能够直观地选取一天中的...
dragcalendar一个可拖拽日历组件
08-10
drag-calendar 一个可拖拽日历组件
前台是个什么东西---JQ&JS---一个排班的程序(JAVASWT改版)
03-19
NULL 博文链接：https://metallica-1860.iteye.com/blog/697863
三班倒查排班工具，电脑手机上都能看，可查询单天和按月查看排班。
03-21
三班倒查排班工具，电脑手机上都能看。使用javascript实现，简单易用。可查询单天和按月查看排班。再到下一年也能一直正常用
基于redips-drag-min.js拖动排课功能
weixin_43150427的博客
07-10 529
最近在做一个功能，大致是，老师提交自己想要上的课和时间，然后管理员进行排课，每个课程在同一时间段可以有多个老师，老师需要排优先级，学生预约课程时，按老师优先级顺序进行确认上课。 开始的时候给客户做了一个勾选进行排课的，但是客户为了漂亮，刀架在脖子上非要拖动排课，于是只能勉为其难做了。废话不多说，开始阐述实现。 本功能主要用到一个第三方js，官方地址为：https://www.redips.net，大家可以进官网下载样例。 遇到的问题 html中div包裹样式一定要按规定格式，其中id="redips-dr
JQuery对元素拖拽排序，元素拖拽，JQuery拖拽
qq_33427869的博客
04-09 2227
前阵子项目前端界面有一个拖动元素进行排序的功能，很是头疼（我一个后端人员，平时替补前端画个页面也够难为人了，拖动排序这个东西要怎么搞？）。 预期效果图： 于是网上各种搜索，有用vue的（咱不会），有用js插件的（实现效果与预期不符），后来看到有用CSS中position定位来跟踪鼠标移动的，觉得可行，至少在我能理解的范围内。 简单来说就是让元素跟踪鼠标位置，然后判断其在页面显示元素列表中的像素位置，从而判断其在数据列表中的位置。 下面是原理的代码实现： <!DOCTYPE html&g
Javascript:日期排班功能实现
butterNo1的博客
03-09 594
Javascript:日期排班功能实现
js jquery 实现 排班,轮班，日历，日程。使用fullcalendar 插件
热门推荐
ParadiserD的博客
12-08 3万+
如果想用fullcalendar实现排班功能，或者日历、日程功能。那么只需要简单的几步： 这里先挂官网链接： fullcalendar fullcalendar官网下载链接 一、下载及简单配置 1、这里先明确你想要的是哪种形式式：fullcalendar 提供多种日历形式： 你们可以在官网首页的演示里面看到，在这里我主要讲一下我这里使用的两种实现： (1)日历模式（只是用fullc
jquery拖拽相册代码
最新发布
06-13
jQuery提供了强大的DOM操作和事件处理功能，可以方便地实现拖拽功能。对于创建一个简单的相册拖拽效果，我们可以使用`draggable`和`droppable`插件。以下是一个基本的示例，展示如何在jQuery中创建一个可拖动的图片...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值