jquery-ui实现拖拽进行人员员工工作任务安排分配效果代码-html代码-BFW代码库

jquery-ui实现拖拽进行人员员工工作任务安排分配效果代码

代码语言：html

所属分类：拖放

代码描述：jquery-ui实现拖拽进行人员员工工作任务安排效果代码，只需要拖动人员名字到工作任务后面即可分配工作，右侧拖入车辆即可分配车辆。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <style>
        @charset "UTF-8";
        html {
          box-sizing: border-box;
          font-family: "Segoe UI";
          font-size: 13px;
        }
        
        *, *:before, *:after {
          box-sizing: inherit;
        }
        
        .overlay {
          position: fixed;
          z-index: 99998;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.3);
        }
        
        .em-edit-day {
          position: fixed;
          z-index: 99999;
          width: 900px;
          height: 300px;
          top: 50%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%);
          background: #fff;
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
          clear: both;
          border-radius: 2px;
        }
        
        .em-day-header {
          height: 30px;
          background: #4285f4;
          color: #fff;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
        }
        
        .emp-head,
        .job-head,
        .vhc-head {
          display: inline-block;
          float: left;
          padding: 5px;
          text-align: center;
          font-weight: bold;
        }
        
        .emp-head,
        .vhc-head {
          width: 20%;
        }
        
        .emp-head:before {
          font-family: FontAwesome;
          content: "";
          padding: 0 5px;
        }
        
        .vhc-head:before {
          font-family: FontAwesome;
          content: "";
          padding: 0 5px;
        }
        
        .job-head {
          width: 60%;
        }
        
        .job-head:after {
          font-family: FontAwesome;
          content: "";
          padding: 0 5px;
        }
        
        .em-day-body {
          height: calc(100% - 30px);
        }
        
        .em-day-content {
          height: 100%;
          display: inline-block;
          float: left;
          padding: 5px;
        }
        
        .employees,
        .vehicles {
          width: 20%;
        }
        
        .jobs {
          width: 60%;
        }
        
        .content {
          width: 100%;
          height: 100%;
          background: #E0E0E0;
          box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.24);
          padding: 10px;
          border-radius: 2px;
        }
        
        .emp,
        .vhc {
          z-index: 10;
          background: #fff;
          padding: 5px;
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
          border-radius: 2px;
          transition: box-shadow 0.1s ease;
        }
        .emp + .emp, .emp + .vhc,
        .vhc + .emp,
        .vhc + .vhc {
          margin-top: 10px;
        }
        .emp.dragged,
        .vhc.dragged {
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
          z-index: 11;
        }
        .emp.dropped,
        .vhc.dropped {
          position: static !important;
          padding: 0;
          box-shadow: none;
          margin: 0;
          display: inline;
          background: transparent;
          color: #004D40;
        }
        
        .job {
          display: inline-block;
          float: left;
          background: #fff;
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
          width: 150px;
          margin: 0 5px 10px;
          display: inline-block;
          border-radius: 2px;
        }
        .job .job-name {
          padding: 5px;
          height: 30px;
          background: #009688;
          color: #fff;
          font-weight: bold;
          text-align: center;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
        }
        .job .job-emp,
        .job .job-vhc {
          position: relative;
          padding: 5px;
          padding-left: 35px;
          height: 30px;
          border-top: 1px solid rgba(0, 0, 0, 0.12);
          transition: all 0.2s ease;
        }
        .job .job-emp:before,
        .job .job-vhc:before {
          content: "";
          position: absolute;
          left: 0;
          top: 8px;
          font-family: FontAwesome;
          text-align: center;
          width: 30px;
          color: #80CBC4;
          border-right: 1px dotted #80CBC4;
        }
        .job .job-emp.active,
        .job .job-vhc.active {
          background: #B2DFDB;
        }
        .job .job-emp.active:before,
        .job .job-vhc.active:before {
          color: #009688;
          border-color: #009688;
.........完整代码请登录后点击上方下载按钮下载查看