2017-05-07 21 views
0

1.私はある部門のアイテムを持っていますアイテムがtimeline vis.jsにドラッグされている場合、アイテムの範囲/ innerHtmlを取得するにはどうすればいいですか?

2.私はそのアイテムをドラッグしてタイムラインにドロップしています。

3.so落ちたとき。その特定のアイテムのタイムラインの範囲を取得したい。

  1. 私はng-draggable、timeline vis.jsライブラリを使用しました。 1つの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(イベント)); }

  • ので、その作業罰金をドラッグする時に。

    1. 問題が解決しました。
    2. タイムラインでのドロップが成功しましたが、タイムラインでアイテムをドロップしている範囲を取得できません。ここでは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;"> 
      

    3. にドロップしたコードを削除

    4. は大丈夫です。

      5.OnDropComplete機能コード

    OnDropComplete(インデックス:数、ステージ:任意、イベント:任意、のgroupId:数):ボイド{

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

    はconsole.log(ここ。 timeline.getEventProperties(イベント)); }

    1. したがって、console.log(this.timeline.getEventProperties(event));この行はerror.Hereイベントを生成しますが、event.targetは未定義です。

    enter image description here

    答えて

    1

    これは、あなたが解決しようとしているトリッキーな作業です。 visタイムラインは動的(ズームまたはスクロールが可能)なので、アイテムがドロップされた場所の参照ポイントとして使用できる静的ポイントはありません。 同様の問題を解決しようとしたとき、私はdocument.getElementFromPoint()(ドロップイベントの座標を使用)とタイムラインの時間軸の組み合わせを使用して、ユーザーがアイテムをドロップした場所に最も近いポイントを取得していました。これらの情報を使用して、特定の場所にアイテムを追加します。

    これが正しい軌道に乗ることを願っています。

    関連する問題