He estado usando el evento onMoving para rastrear los valores cambiantes de inicio y fin.
¿Cómo puedo encontrar el delta entre los valores anterior y actual de inicio y fin?
onMoving: function(item, callback) { if (item.start < options.min) item.start = options.min; if (item.video_start == 0 && item.segment_start < item.video_start) { item.segment_start = item.video_start; } if (item.video_end > 0 && item.segment_end > item.video_end) { item.segment_end = item.video_end; } callback(item); rearrange_timeline_min_max_value(); },Puedo ver los valores con el siguiente evento, sin embargo, esto también es necesario en onMove y onMoving para finalizar la devolución de llamada (elemento) o la devolución de llamada (nulo).
timeline_items.on('*', function (event, properties) { console.log("Properties : " + JSON.stringify(properties)); });¿Cómo puedo obtener el delta para el inicio y el final con onMoving?
El elemento no se actualiza en el DataSet de elementos hasta que onMove llama a la función de devolución de llamada. Por lo tanto, puede obtener el elemento existente del DataSet dentro de las funciones onMove y onMoving y usar los valores originales en su lógica.
onMoving: function(item, callback){ // Fetch the current item from the DataSet let currentItem = items.get(item.id); ...El ejemplo se incluye en la publicación a continuación y también en https://jsfiddle.net/2gmj8uec/ . El ejemplo solo registra las horas de inicio y finalización antiguas junto con las actualizadas. Al mover, el tiempo 'Desde' no cambia hasta que se activa un evento movido para actualizar el conjunto de datos.
// DOM element where the Timeline will be attached var container = document.getElementById("visualization"); // Create a DataSet (allows two way data-binding) var items = new vis.DataSet([ { id: 1, content: "item 1", start: new Date(2021, 11, 20) }, { id: 2, content: "item 2", start: new Date(2021, 11, 14) }, { id: 3, content: "item 3", start: new Date(2021, 11, 18) }, { id: 4, content: "item 4", start: new Date(2021, 11, 16), end: new Date(2021, 11, 19) }, { id: 5, content: "item 5", start: new Date(2021, 11, 25) }, { id: 6, content: "item 6", start: new Date(2021, 11, 27), type: "point" }, ]); // Configuration for the Timeline var options = { editable: true, onMoving: function(item, callback){ // Fetch the current item from the DataSet let currentItem = items.get(item.id); // Log the changes console.log("Moving Start - From:", currentItem.start.toISOString(), "To:", item.start.toISOString()); if(item.end){ console.log("Moving End - From:", currentItem.end.toISOString(), "To:", item.end.toISOString()); } // Return the item, updated if needed callback(item); }, onMove: function(item, callback){ // Fetch the current item from the DataSet let currentItem = items.get(item.id); // Log the changes console.log("Moved Start - From:", currentItem.start.toISOString(), "To:", item.start.toISOString()); if(item.end){ console.log("Moved End - From:", currentItem.end.toISOString(), "To:", item.end.toISOString()); } // Return the item, updated if needed // This will result in the items DataSet being updated callback(item); }, }; // Create a Timeline var timeline = new vis.Timeline(container, items, options); body, html { font-family: sans-serif; } /* Restrict height of console in stackoverflow snippet */ .as-console-wrapper { max-height: 4em !important; } <script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script> <link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/> <div id="visualization"></div>