将项目拖到时间线vis.js时如何获取项目的范围/innerHtml？答案

【问题标题】：How to get the range/innerHtml of an item when item is drag to timeline vis.js?将项目拖到时间线vis.js时如何获取项目的范围/innerHtml？
【发布时间】：2017-05-07 19:04:16
【问题描述】：

1.我在一个 div 中有一个项目

2.我将这些项目拖放到时间线中。

3.so 在丢弃的时候。我想得到那个特定项目的时间线范围。

我使用了 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.所以这里的vm.StartDragging()是拖动事件的函数。

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

function StartDragging(data:stage,event :any){

console.log(this.timeline.getEventProperties(event)); }

所以在拖动它的时候工作正常。

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

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

所以 console.log(this.timeline.getEventProperties(event));此行生成错误。此处事件正常，但未定义 event.target。

【问题讨论】：

标签： html angularjs timeline vis.js

【解决方案1】：

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

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

【讨论】：