vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

139 lines
3.5 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>Timeline | Drag & Drop</title>
  6. <script src="../../../dist/vis.js"></script>
  7. <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  8. <script src="../../googleAnalytics.js"></script>
  9. <style type="text/css">
  10. li.item {
  11. list-style: none;
  12. width: 150px;
  13. color: #1A1A1A;
  14. background-color: #D5DDF6;
  15. border: 1px solid #97B0F8;
  16. border-radius: 2px;
  17. margin-bottom: 5px;
  18. padding: 5px 12px;
  19. }
  20. li.item:before {
  21. content: "≣";
  22. font-family: Arial, sans-serif;
  23. display: inline-block;
  24. font-size: inherit;
  25. cursor: move;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <h1>Timeline Drag & Drop Example</h1>
  31. <p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p>
  32. <div id="mytimeline" ></div>
  33. <div>
  34. <h3>Items:</h3>
  35. <ul class="items">
  36. <li draggable="true" class="item">
  37. item 1 - box
  38. </li>
  39. <li draggable="true" class="item">
  40. item 2 - point
  41. </li>
  42. <li draggable="true" class="item">
  43. item 3 - range
  44. </li>
  45. <li draggable="true" class="item">
  46. item 3 - range - fixed times - <br>
  47. (start: now, end: now + 10 min)
  48. </li>
  49. </ul>
  50. </div>
  51. <script>
  52. // create groups
  53. var numberOfGroups = 3;
  54. var groups = new vis.DataSet()
  55. for (var i = 0; i < numberOfGroups; i++) {
  56. groups.add({
  57. id: i,
  58. content: 'Truck&nbsp;' + i
  59. })
  60. }
  61. // create items
  62. var numberOfItems = 10;
  63. var items = new vis.DataSet();
  64. var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
  65. for (var truck = 0; truck < numberOfGroups; truck++) {
  66. var date = new Date();
  67. for (var order = 0; order < itemsPerGroup; order++) {
  68. date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
  69. var start = new Date(date);
  70. date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
  71. var end = new Date(date);
  72. items.add({
  73. id: order + itemsPerGroup * truck,
  74. group: truck,
  75. start: start,
  76. end: end,
  77. content: 'Order ' + order
  78. });
  79. }
  80. }
  81. // specify options
  82. var options = {
  83. stack: true,
  84. start: new Date(),
  85. end: new Date(1000*60*60*24 + (new Date()).valueOf()),
  86. editable: true,
  87. orientation: 'top'
  88. };
  89. // create a Timeline
  90. var container = document.getElementById('mytimeline');
  91. timeline1 = new vis.Timeline(container, items, groups, options);
  92. function handleDragStart(event) {
  93. dragSrcEl = event.target;
  94. event.dataTransfer.effectAllowed = 'move';
  95. var itemType = event.target.innerHTML.split('-')[1].trim();
  96. var item = {
  97. id: new Date(),
  98. type: itemType,
  99. content: event.target.innerHTML.split('-')[0].trim()
  100. };
  101. var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times')
  102. if (isFixedTimes) {
  103. item.start = new Date();
  104. item.end = new Date(1000*60*10 + (new Date()).valueOf());
  105. }
  106. event.dataTransfer.setData("text", JSON.stringify(item));
  107. }
  108. var items = document.querySelectorAll('.items .item');
  109. for (var i = items.length - 1; i >= 0; i--) {
  110. var item = items[i];
  111. item.addEventListener('dragstart', handleDragStart.bind(this), false);
  112. }
  113. </script>
  114. </body>
  115. </html>