How to get start and end time on drop in vis.js timeline?

Question

I implemented the vis.js timeline in my vue.js project, but I have a problem with the drop. First of all I think the drop does not works in that library, second how can i get the start and the end time and date when I drag one item and then drop it?

Because the drop event is not working I'm trying to do it with

@items-update="itemsUpdate()"

and I'm getting the data back with.

let properties = this.$refs.timeline.getEventProperties(event)

But I'm getting the time where the mouse pointer stops.

So is there any way to get the start time and end time after drop I mean after I stop dragging the item?

Because I need to save start time and the end time into my database for that dragged item.

Thanks.

Answer 1

I don't know how to implement directly with vue.js but you can already get this data from "vis.js" by adding a "dragend" event to the dragged item in the timeline and then processing it in vue.js.

Here is working example adapted from "vis.js examples" website

    // create groups
    var numberOfGroups = 3;
    var groups = new vis.DataSet()
    for (var i = 0; i < numberOfGroups; i++) {
        groups.add({
            id: i,
            content: 'Truck&nbsp;' + i
        })
    }

    // create items
    var numberOfItems = 10;
    var items = new vis.DataSet();

    var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);

    for (var truck = 0; truck < numberOfGroups; truck++) {
        var date = new Date();
        for (var order = 0; order < itemsPerGroup; order++) {
            date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
            var start = new Date(date);

            date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4));
            var end = new Date(date);

            items.add({
                id: order + itemsPerGroup * truck,
                group: truck,
                start: start,
                end: end,
                content: 'Order ' + order
            });
        }
    }

    // specify options
    var options = {
        stack: true,
        start: new Date(),
        end: new Date(1000 * 60 * 60 * 24 + (new Date()).valueOf()),
        editable: true,
        orientation: 'top',
        onDropObjectOnItem: function(objectData, item, callback) {
            if (!item) { return; }
            alert('dropped object with content: "' + objectData.content + '" to item: "' + item.content + '"');
        }
    };

    // create a Timeline
    var container = document.getElementById('mytimeline');
    timeline1 = new vis.Timeline(container, items, groups, options);

    function handleDragStart(event) {
        var dragSrcEl = event.target;

        event.dataTransfer.effectAllowed = 'move';
        var itemType = event.target.innerHTML.split('-')[1].trim();
        var item = {
            id: new Date(),
            type: itemType,
            content: event.target.innerHTML.split('-')[0].trim()
        };
        // set event.target ID with item ID
        event.target.id = new Date(item.id).toISOString();

        var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times')
        if (isFixedTimes) {
            item.start = new Date();
            item.end = new Date(1000 * 60 * 10 + (new Date()).valueOf());
        }
        event.dataTransfer.setData("text", JSON.stringify(item));

        // Trigger on from the new item dragged when this item drag is finish
        event.target.addEventListener('dragend', handleDragEnd.bind(this), false);
    }

    function handleDragEnd(event) {
        // Last item that just been dragged, its ID is the same of event.target
        var newItem_dropped = timeline1.itemsData.get(event.target.id);

        var html = "<b>id: </b>" + newItem_dropped.id + "<br>";
        html += "<b>content: </b>" + newItem_dropped.content + "<br>";
        html += "<b>start: </b>" + newItem_dropped.start + "<br>";
        html += "<b>end: </b>" + newItem_dropped.end + "<br>";
        document.getElementById('output').innerHTML = html;
    }

    function handleObjectItemDragStart(event) {
        var dragSrcEl = event.target;

        event.dataTransfer.effectAllowed = 'move';
        var objectItem = {
            content: 'objectItemData',
            target: 'item'
        };
        event.dataTransfer.setData("text", JSON.stringify(objectItem));
    }

    var items = document.querySelectorAll('.items .item');

    var objectItems = document.querySelectorAll('.object-item');

    for (var i = items.length - 1; i >= 0; i--) {
        var item = items[i];
        item.addEventListener('dragstart', handleDragStart.bind(this), false);
    }

    for (var i = objectItems.length - 1; i >= 0; i--) {
        var objectItem = objectItems[i];
        objectItem.addEventListener('dragstart', handleObjectItemDragStart.bind(this), false);
    }

   li.item {
        list-style: none;
        width: 150px;
        color: #1A1A1A;
        background-color: #D5DDF6;
        border: 1px solid #97B0F8;
        border-radius: 2px;
        margin-bottom: 5px;
        padding: 5px 12px;
    }

    li.item:before {
        content: "≣";
        font-family: Arial, sans-serif;
        display: inline-block;
        font-size: inherit;
        cursor: move;
    }

    li.object-item {
        list-style: none;
        width: 150px;
        color: #1A1A1A;
        background-color: #D5DDF6;
        border: 1px solid #97B0F8;
        border-radius: 2px;
        margin-bottom: 5px;
        padding: 5px 12px;
    }

    li.object-item:before {
        content: "≣";
        font-family: Arial, sans-serif;
        display: inline-block;
        font-size: inherit;
        cursor: move;
    }

    .items-panel {
        display: flex;
        justify-content: space-around;
    }

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <title>Timeline | Drag & Drop</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />
</head>

<body>
    <h1>Timeline Drag & Drop Example</h1>
    <p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler
        must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p>
    <div id="mytimeline"></div>
    <div class='items-panel'>
        <div class='side' style="max-width:350px;overflow:auto">
            <h3>Last item just been dragged on timeline:</h3>
            <pre id="output"></pre>
        </div>
        <div class='side'>
            <h3>Items:</h3>
            <ul class="items">
                <li draggable="true" class="item">
                    item 1 - box
                </li>
                <li draggable="true" class="item">
                    item 2 - point
                </li>
                <li draggable="true" class="item">
                    item 3 - range
                </li>
                <li draggable="true" class="item">
                    item 3 - range - fixed times -
                    <br> (start: now, end: now + 10 min)
                </li>
            </ul>
        </div>
        <div class='side'>
            <h3>Object with "target:'item'":</h3>
            <li draggable="true" class="object-item">
                object with target:'item'
            </li>
        </div>
    </div>
</body>

</html>