Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="description" content="vis Timeline Dragging Jumps">
  <script src="https://cdn.jsdelivr.net/npm/vis-timeline@7.7.3/dist/vis-timeline-graph2d.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-timeline@7.7.3/dist/vis-timeline-graph2d.min.css">
​
  <script type="text/javascript">
// groups/rows
    let groupIds = [
      'group1',
      'group2',
      'group3',
      'group4',
      'group5',
      'group6',
      'group7',
      'group8',
      'Ignored'
    ];
​
    let groupsDataSet = new vis.DataSet();
    groupsDataSet.add(groupIds.map((id, i) => ({
      content: `<div>Group ${i+1}</div>`,
      id: id,
      showNested: false,
      subgroupStack: { NoSubgroup: true },
    })));
​
​
// data set
    let pad = n => ++n < 10 ? ('0' + n.toString(10)) : n.toString(10);
    let toDate = dt => dt + 'T06:00:00.000Z';
    let asItem = (start, end, bkg, group) => ({
      start: toDate(start),
      end: toDate(end),
      style: 'background-color:' + bkg,
      group: group
    });
​
    let items = [
      [ '2024-01-24', '2024-01-25', 'faccce', 'group1' ],
      [ '2024-03-23', '2024-03-24', 'faccce', 'group1' ],
      [ '2024-01-24', '2024-01-27', 'd1d1d1', 'group2' ],
      [ '2024-03-01', '2024-03-06', 'd1d1d1', 'group2' ],
      [ '2024-04-12', '2024-04-17', '89bcab', 'group2' ],
      [ '2024-01-22', '2024-01-25', 'd1d1d1', 'group3' ],
      [ '2024-03-10', '2024-03-14', 'd1d1d1', 'group3' ],
      [ '2024-02-04', '2024-02-18', '000000', 'group3' ],
      [ '2024-01-19', '2024-01-26', 'f38588', 'group4' ],
      [ '2024-02-23', '2024-03-08', 'f38588', 'group4' ],
      [ '2024-01-19', '2024-02-02', 'f38588', 'group5' ],
      [ '2024-03-29', '2024-04-12', 'f38588', 'group5' ],
      [ '2023-12-29', '2024-01-26', 'f38588', 'group6' ],
      [ '2024-02-16', '2024-02-21', 'faedcb', 'group6' ],
      [ '2024-01-19', '2024-02-03', 'f38588', 'group7' ],
      [ '2024-02-14', '2024-02-28', 'f38588', 'group7' ],
      [ '2024-01-16', '2024-01-26', 'faedcb', 'group8' ],
      [ '2024-01-26', '2024-02-02', 'ccadd9', 'group8' ],
      [ '2024-02-05', '2024-02-15', 'ccadd9', 'group8' ],
      [ '2024-02-15', '2024-02-25', 'faedcb', 'group8' ],
      [ '2024-01-27', '2024-01-29', 'f38588', 'group8' ]
    ].map((item, i) => {
      let n = pad(i);
      return {
        id: 'i' + n,
        content: `Item ${n}<br>This<br>thing<br>is<br>tall`,
        ...asItem.apply(null, item),
        editable: { updateTime: true, updateGroup: true, remove: false },
        subgroup: 'NoSubgroup',
        type: 'range'
      };
    });
  </script>
​
  <title>Timeline Dragging Jump</title>
</head>
<body>
  <h1>Timeline Dragging Jump</h1>
  <br>
  <div id="timeline"></div>
  <br>
​
  <script type="text/javascript">
    let options = {
      editable: {
        add: false,
        updateTime: true,
        updateGroup: true,
        remove: false,
        overrideItems: true
      },
      height: 350,
      zoomable: true,
      zoomMax: 253206145314,
      zoomMin: 80927257,
      zoomKey: 'ctrlKey',
      moveable: true,
      orientation: 'top',
      margin: {
        item: { horizontal: 0, vertical: 0 }
      },
      timeAxis: { scale: 'day' },
      showTooltips: false,
      maxHeight: 1500,
      itemsAlwaysDraggable: true,
      showMinorLabels: false,
      start: '2024-01-23T13:03:14.862Z',
      end: '2024-04-21T12:03:14.862Z',
      selectable: true,
      verticalScroll: true,
      stack: true,
      order: (item1, item2) => item1.id.localeCompare(item2.id)
    };
​
    let timeline = new vis.Timeline(
      document.getElementById('timeline'),
      items,
      groupsDataSet,
      options
    );
  </script>
​
  <ol>
    <li>Scroll to the bottom of the timeline</li>
    <li>Pan sideways by any amount</li>
    <li>Drag the bottom-most orange block into the gap in Group 8</li>
    <li>Dragged item goes away and view snaps up
      <ul>
        <li>Mouse no longer holds the block
          <ul>
            <li>But you may be able to get it back by scrolling down if the mouse button is still held</li>
          </ul>
        </li>
        <li>This can happen even when zoomed in</li>
      </ul>
    </li>
  </ol>
​
</body>
</html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers