Skip to content
This repository has been 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

Open
fras2560 opened this issue May 22, 2019 · 0 comments
Open

Flicking a timeline element off of screen unable to drag other element #4294

fras2560 opened this issue May 22, 2019 · 0 comments

Comments

@fras2560
Copy link

fras2560 commented May 22, 2019 •
edited
Loading

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>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@fras2560