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