almende / vis

⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
7.86k stars 1.48k forks source link

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

Open fras2560 opened 5 years ago

fras2560 commented 5 years ago

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>