<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>