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