Question

我正在使用vis.js时间轴（http://visjs.org/docs/timeline/）。

我希望实现元素之间不可能存在差距。

如果有人正在删除其他元素之间的元素并向空格添加新元素，则新元素应自动适应间隙。
如果有人通过调整大小来更新元素的时间（大小），它也应该自动适合下一个元素。
我需要验证所有组中的所有元素都在给定的日期范围内填充。

这些是我的可编辑选项：

 editable: {
     add: true,         // add new items by double tapping
     updateTime: true,  // drag items horizontally
     updateGroup: false, // drag items from one group to another
     remove: true,       // delete an item by tapping the delete button top right
     overrideItems: false  // allow these options to override item.editable
 },

不允许在组之间移动元素。

我的第一个猜测是使用onMove函数，但我无法弄清楚如何找到上一个和下一个元素来调整开始和结束。

也许其他人有同样的问题并找到了解决方案。

Answer 1

我有一个类似的情况，拖动一个元素会重新调整所有其他元素并将一个元素拖动到另一个组会使它在最后一个元素之后捕捉。

没有简单的选项来设置这样做。基本上你必须听这些事件并跟踪你的元素在哪里才能更新它。

例如，在您的第一种情况下，您需要做的是：

聆听onAdd()事件
通过查看start和end次，搜索将创建此新元素的该组元素。
更新此新项目，使start等于前一个元素的end，并使end等于下一个元素的start。

这是一个简单的JS小提琴，可以帮助您入门：http://jsfiddle.net/rj35mbvd/

在这个小提琴中，每次尝试添加项目时，都会在时间轴中已存在的两个元素之间添加。

Answer 2

这是个不错的答案：

在stack: false + stackSubgroups: true的选项中使用，并且默认情况下仅使用相同的子组，元素将内联显示；）

在此HTML页面http://visjs.org/examples/timeline/groups/subgroups.html的末尾检查<script>

我将分享我正在研究的高级路线图;）

最佳

如何创建没有间隙的vis.js时间轴

2 个答案: