0

我一直在使用 onMoving 事件来跟踪开始和结束的变化值。

如何找到 start 和 end 的先前值和当前值之间的增量？

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();
},

我可以看到带有以下事件的值，但是在 onMove 和 onMoving 中也需要这样做，以便最终确定它的回调（项目）或回调（空）。

timeline_items.on('*', function (event, properties) {
    console.log("Properties : " + JSON.stringify(properties));
});

如何使用 onMoving 获得开始和结束的增量？

4

1 回答 1

1

在调用回调函数之前，项目数据集中的项目不会更新onMove。onMove因此，您可以在and函数中从 DataSet 中获取现有项目，并onMoving在逻辑中使用原始值。

onMoving: function(item, callback){
  // Fetch the current item from the DataSet
  let currentItem = items.get(item.id);
  ...

示例包含在下面的帖子中以及https://jsfiddle.net/2gmj8uec/中。该示例仅记录旧的开始/结束时间以及更新的时间。移动“From”时，在触发移动事件以更新 DataSet 之前，时间不会改变。

// 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>

于 2022-01-12T10:20:11.510 回答