Dragging is not working properly if Scale is 5 Years for TimeAxis

[Subha2100]

The issue is related to Timeline functionality of VIS js.

I am giving step of 5 years in timeAxis. While dragging the individual item it is taking me to end of timeAxis. It is not allowing me to drop the item between two axis. For example if I want to drag "Text1" from 2020 to 2023 it is not working. It is dragging the item to 2025.

please suggest which attribute we can use for this issue. Below is my code.

var options = {
min: new Date(2018, 8, 17), max: new Date(2040, 10, 20),
start:0, multiselect: true, maxHeight: 400, editable: { add: false,
updateTime: true,
updateGroup: false,
remove: false,
overrideItems: false
}, orientation: 'top', tooltipOnItemUpdateTime: false, onInitialDrawComplete: function() { logEvent('Timeline initial draw completed', {}); }, zoomable: false, timeAxis: {scale: 'year', step: 5} };

// creating Groups var groupsname=["Family","Career","Volunteering"]; var length= groupsname.length; var groups = new vis.DataSet() for (var i = 0; i < length; i++) { groups.add({ id: i, content: groupsname[i] }) }

// create items for groups

var itemForGroup =[{'id':'id1','Name':'Text1','start':'9/17/2018 8:00','end':'9/17/2020 10:00','groupid':0}, {'id':'id2','Name':'Text2','start':'9/17/2018 8:00','end':'9/17/2018 10:00','groupid':0}, {'id':'id3','Name':'Text3','start':'9/17/2018 8:00','end':'9/17/2020 10:00','groupid':1}, {'id':'id4','Name':'Text4','start':'9/17/2018 8:00','end':'9/17/2018 9:00','groupid':2}, {'id':'id5','Name':'Text5','start':'9/17/2018 8:00','end':'9/17/2020 10:00','groupid':2}]; var itemLength=itemForGroup.length; var itemsWithGroups = new vis.DataSet(); for (var truck = 0; truck < length; truck++) { var date = new Date(); for (var order = 0; order < itemLength; order++) { var start = itemForGroup[order].start; var end = itemForGroup[order].end; if(truck == itemForGroup[order].groupid) { itemsWithGroups.add({ id: order + itemLength * truck, group: truck, start: itemForGroup[order].start, end: itemForGroup[order].end, content: itemForGroup[order].Name }); }

}

}

function stringifyObject (object) {
  if (!object) return;
  var replacer = function(key, value) {
    if (value && value.tagName) {
      return "DOM Element";
    } else {
      return value;
    }
  }
  return JSON.stringify(object, replacer)
}

function logEvent(event, properties) { var log = document.getElementById('log'); var msg = document.createElement('div'); var prop = stringifyObject(properties); var startdate =prop.split(',')[8]; var enddate = prop.split(',')[9]; msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' + 'properties=' + prop ; console.log(startdate , enddate); log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg); }

var container = document.getElementById('mytimeline'); timeline = new vis.Timeline(container, itemsWithGroups, groups, options);

itemsWithGroups.on('*', function (event, properties) { logEvent(event, properties); });

[Subha2100]

vis_timeAxis.zip

[Subha2100]

We need to use Snap:null in option.