| <html> | |
|     <head> | |
|         <title>Timeline | itemsAlwaysDraggable Option</title> | |
|         <meta charset="utf-8"> | |
|         <script src="../../../dist/vis.js"></script> | |
|         <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> | |
|     </head> | |
|     <body> | |
|         <p>The <code>itemsAlwaysDraggable</code> option allows to drag items around without first selecting them. When <code>itemsAlwaysDraggable.range</code> is set to <code>true</code>, the range can be changed without selection as well.</p> | |
|         <div id="mytimeline"></div> | |
| 
 | |
|         <script> | |
|             var container = document.getElementById('mytimeline'), | |
|                 items = new vis.DataSet(); | |
| 
 | |
|             for (var i = 10; i >= 0; i--) { | |
|                 var start = new Date(new Date().getTime() + i * 100000); | |
|                 items.add({ | |
|                     id: i, | |
|                     content: "item " + i, | |
|                     start: start, | |
|                     end: new Date(start.getTime() + 100000) | |
|                 }); | |
|             } | |
| 
 | |
|             var options = { | |
|                 start: new Date(), | |
|                 end: new Date(new Date().getTime() + 1000000), | |
|                 editable: true, | |
|                 itemsAlwaysDraggable: { | |
|                     item: true, | |
|                     range: true | |
|                 } | |
|             }; | |
|             var timeline = new vis.Timeline(container, items, null, options); | |
|         </script> | |
|     </body> | |
| </html>
 |