This repository was archived by the owner on Jul 29, 2019. It is now read-only.
This repository was archived by the owner on Jul 29, 2019. It is now read-only.
Flicking a timeline element off of screen unable to drag other element #4294
Description
I created a simple example to demonstrate it. I was unable to produce the issue on code pen but probably since I cannot drag an element of the screen. The issue I have is while on Windows 10 and opening the below page in Google Chrome. I have two monitors and I open the browser in one page. I then select one of the elements and drag if quickly all the way until my cursor is off the screen. I then proceed to select the other element and drag it. It will move the timeline window instead of the element. Only after moving the window and re-selecting the element will I be able to drag it. This is currently an issue for a project I am working on. Is this an known issue, intended behavior or am I just missing an setting?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="visualization"></div>
</body>
<script type="text/javascript">
function getDayFromNow(days){
const result = new Date();
return result.setDate(result.getDate() + days);
}
function getRow(start, end, name, group){
return {id: name,
subgroup: group,
start: start,
end: end,
title: name,
content: name,
orderId: group,
};
}
window.onload = function () {
var container = document.getElementById("visualization")
var items = new vis.DataSet([
getRow(getDayFromNow(0), getDayFromNow(2), "A1", 1),
getRow(getDayFromNow(4), getDayFromNow(6), "A2", 2),
]);
var options = {
groupEditable: true,
stackSubgroups:true,
multiselect:true,
stack: false,
editable: {
add: false,
updateTime: true,
updateGroup: false,
remove: false,
overrideItems: false,
},
groupOrder: 'weight',
start: getDayFromNow(-10),
end: getDayFromNow(10),
};
var timline = new vis.Timeline(container, items, options);
}
</script>
</html>