vis.js实现拖放设置修改的工作时间排班图表效果代码-html代码-BFW代码库

vis.js实现拖放设置修改的工作时间排班图表效果代码

代码语言：html

所属分类：图表

代码描述：vis.js实现拖放设置修改的工作时间排班图表效果代码，拖动的对象可以是方块、点、可变滑块等类型，适合时间安排表搭建。

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vis.4.21.0.css">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vis.4.21.0.js"></script>
<style>
li.item {
        list-style: none;
        width: 150px;
        color: #1A1A1A;
        background-color: #D5DDF6;
        border: 1px solid #97B0F8;
        border-radius: 2px;
        margin-bottom: 5px;
        padding: 5px 12px;
    }

    li.item:before {
        content: "≣";
        font-family: Arial, sans-serif;
        display: inline-block;
        font-size: inherit;
        cursor: move;
    }

    li.object-item {
        list-style: none;
        width: 150px;
        color: #1A1A1A;
        background-color: #D5DDF6;
        border: 1px solid #97B0F8;
        border-radius: 2px;
        margin-bottom: 5px;
        padding: 5px 12px;
    }

    li.object-item:before {
        content: "≣";
        font-family: Arial, sans-serif;
        display: inline-block;
        font-size: inherit;
        cursor: move;
    }

    .items-panel {
        display: flex;
        justify-content: space-around;
    }
</style>

</head>

<body>
    <h1>Timeline Drag & Drop Example</h1>

    <div id="mytimeline"></div>
    <div class='items-panel'>
        <div class='side' style="max-width:350px;overflow:auto">
            <h3>Last item just been dragged on timeline:</h3>
            <pre id="output"></pre>
        </div>
        <div class='side'>
            <h3>Items:</h3>
            <ul class="items">
                <li draggable="true" class="item">
                    item 1 - box
                </li>
                <li draggable="true" class="item">
                    item 2 - point
                </li>
                <li draggable="true" class="item">
                    item 3 - range
                </li>
                <li draggable="true" class="item">
                    item 3 - range - fixed times -
                    <br> (start: now, end: now + 10 min)
                </li>
            </ul>
        </div>
        <div class='side'>
            <h3>Object with "target:'item'":</h3>
            <li draggable="true" class="object-item">
                object with target:'item'
            </li>
        </div>
    </div>

      <script  >
    var numberOfGroups = 1;
    var groups = new vis.DataSet()
    for (var i = 0; i < numberOfGroups; i++) {
        groups.add({
            id: i,
            content: 'Truck&nbsp;' + i
        })
    }

    // create items
    var numberOfItems = 10;
    var items = new vis.DataSet();

    var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);

    for (var truck = 0; truck < numberOfGroups; truck++) {
        var date = new Date();
        for (var order = 0; order < itemsPerGroup; order++) {
            date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
            var start = new Date(date);

            date.setHours(date.getHours() + 2 + Math.floor(Math.........完整代码请登录后点击上方下载按钮下载查看