- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>Timeline | Drag & Drop</title>
-
- <script src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
-
- <script src="../../googleAnalytics.js"></script>
-
- <style type="text/css">
- 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;
- }
- </style>
- </head>
-
- <body>
-
- <h1>Timeline Drag & Drop Example</h1>
-
- <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>
-
- <div id="mytimeline" ></div>
- <div>
- <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>
-
- <script>
-
- // create groups
- var numberOfGroups = 3;
- var groups = new vis.DataSet()
- for (var i = 0; i < numberOfGroups; i++) {
- groups.add({
- id: i,
- content: 'Truck ' + 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.random()*4));
- var end = new Date(date);
-
- items.add({
- id: order + itemsPerGroup * truck,
- group: truck,
- start: start,
- end: end,
- content: 'Order ' + order
- });
- }
- }
-
- // specify options
- var options = {
- stack: true,
- start: new Date(),
- end: new Date(1000*60*60*24 + (new Date()).valueOf()),
- editable: true,
- orientation: 'top'
- };
-
- // create a Timeline
- var container = document.getElementById('mytimeline');
- timeline1 = new vis.Timeline(container, items, groups, options);
-
- function handleDragStart(event) {
- dragSrcEl = event.target;
-
- event.dataTransfer.effectAllowed = 'move';
- var itemType = event.target.innerHTML.split('-')[1].trim();
- var item = {
- id: new Date(),
- type: itemType,
- content: event.target.innerHTML.split('-')[0].trim()
- };
-
- var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times')
- if (isFixedTimes) {
- item.start = new Date();
- item.end = new Date(1000*60*10 + (new Date()).valueOf());
- }
-
- event.dataTransfer.setData("text", JSON.stringify(item));
- }
-
- var items = document.querySelectorAll('.items .item');
-
- for (var i = items.length - 1; i >= 0; i--) {
- var item = items[i];
- item.addEventListener('dragstart', handleDragStart.bind(this), false);
- }
-
- </script>
-
- </body>
- </html>
|
