如何在项目被拖动到时间线 vis.js 时获取项目的 range/innerHtml？

Question

1.I 合二为一 div

2.I 正在拖动该项目并放入时间轴中。

3.so 在 dropping.I 的时候想要获取那个特定项目的时间轴范围。

我使用了 ng-draggable,timeline vis.js 库。

项目合一 div 代码：

<div class="timeline-elements-left-column">
                <md-card class="timeline-elements-container"
                             ng-repeat="element in vm.elementAndStages">
                    <md-toolbar md-scroll-shrink class="timeline-selected-elements drag-object">
                        <div layout="row"
                             id="translation-icon-move"
                             ng-drag="vm.isDragging"
                             ng-mousedown="vm.StartDragging(element, event)"
                             ng-drag-data="element">
                            <div flex class="timeline-selected-elements-text">
                                <span>{{element.selectedElement.description}}</span>
                            </div>
                            <div class="timeline-selected-elements-icon">
                                <md-icon ng-show="element.selectedElement.collapsed"
                                         class="zmdi zmdi-chevron-up"
                                         ng-click="vm.Collapse(element.selectedElement)">
                                </md-icon>
                                <md-icon ng-hide="element.selectedElement.collapsed"
                                         class="zmdi zmdi-chevron-down"
                                         ng-click="vm.Collapse(element.selectedElement)">
                                </md-icon>
                            </div>
                            <div class="timeline-selected-elements-icon timeline-selected-elements-icon-drag">
                                <md-icon class="zmdi zmdi-more-vert"></md-icon>
                            </div>
                        </div>
                    </md-toolbar>
                </md-card>
            </div>

4.So这里vm.StartDragging()是拖动事件的函数

所以在启动拖拽功能的时候

函数 StartDragging（数据：阶段，事件：任意）{

console.log(this.timeline.getEventProperties(事件)); }

所以在拖动的时候效果很好

问题在于删除成功。
在时间轴上删除成功，但我无法获得用户在时间轴中删除项目的范围。

在 Html

中删除代码

<div class="vis-group" ng-drop="true" ng-drop-success="vm.OnDropComplete($index, $data, $event,0)" ng-drag-stop="vm.StopDragging($event)" id="group0" style="height: 173px;">

这里掉线即可

5.OnDropComplete 函数代码

OnDropComplete(index :number,stage:any,event: any, groupId: number): void {

    var indexToRemove: number = -1;
    this.pendingChanges = [];

console.log(this.timeline.getEventProperties(事件)); }

所以console.log(this.timeline.getEventProperties(事件));生成 error.Here 事件的这一行没问题，但是 event.target 未定义。

Answer 1

这是您要解决的棘手任务。由于 vis 时间轴是动态的（可以缩放或滚动），您没有静态点可以用作项目放置位置的参考点。当我试图解决类似的问题时，我结合使用了 document.getElementFromPoint()（使用放置事件中的坐标）和时间轴中的时间轴来获得距离用户放置项目最近的点。使用这些信息，我会在特定位置添加项目。

我希望这能让您走上正轨。

如何在项目被拖动到时间线 vis.js 时获取项目的 range/innerHtml？

How to get the range/innerHtml of an item when item is drag to timeline vis.js?

html

timeline

angularjs

vis.js