Перетащите содержимое ячейки угловой перетаскивания CDK - PullRequest
Новая
       7

Перетащите содержимое ячейки угловой перетаскивания CDK

0 голосов
/ 09 февраля 2019

Я хочу перетащить span Item1 из столбца 1 в столбец 2, и я хочу получить индекс столбца. Так как я могу сделать это в угловом перетаскивании cdk, есть ли способ поместить диапазон вновая позиция, я пытался изменить стиль, но я не думаю, что это хорошая идея enter image description here?

это мой HTML 

<table id="#our_table" border="1">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>

  </tr>
  <tr>

    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)">
        <span cdkDrag [cdkDragData]="item" cdkDragLockAxis="x" cdkDrag (cdkDrag)="drag($event)" class="event" id="item1">Item 1</span>
      </div>
    </td>
    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)"></div>
    </td>
    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)"></div>
    </td>
    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)"></div>
    </td>
    <td>
      <div cdkDropList (cdkDropListDropped)="drop($event)"></div>
    </td>

  </tr>

</table>

, и это мой машинопись 

import { Component, OnInit } from '@angular/core';
import { ZoomService } from '../zoom.service';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-grille',
  templateUrl: './grille.component.html',
  styleUrls: ['./grille.component.scss']
})
export class GrilleComponent implements OnInit {



  msg: string;
  constructor(private zoomService: ZoomService) { }

  ngOnInit() {
   {




  drop(event: CdkDragDrop<string[]>) {

    event.item.element.nativeElement.style.left = "100px";
    console.log(event)
  }
  drag(event: CdkDragDrop<string[]>) {
    console.log("i am moved ")
  }
}
...