html - 使用 HTML5 拖放 Angular material 2 md-list

Question

考虑以下组件模板，我正在尝试实现为 Angular Material 2 和简单的 li-tag 重新排序列表元素的能力。

此功能对 li-tag 标签非常有效，但对 md-list-item 无效

这是为什么？

我的模板:

<md-nav-list>
  <md-list-item *ngFor="let i of arr" draggable="true" (dragenter)="dragenter($event)" (dragstart)="dragstart($event)">
    {{i}}
  </md-list-item>
</md-nav-list>

<ul>
  <li *ngFor="let i of arr" draggable="true" (dragenter)="dragenter($event)" (dragstart)="dragstart($event)">{{i}}</li>
</ul>

调用函数:

  source: any;

  /**
   * CHECKS IF ONE ELEMENT LIES BEFORE THE OTHER
  */
  isbefore(a, b) {
    if (a.parentNode == b.parentNode) {
      for (var cur = a; cur; cur = cur.previousSibling) {
        if (cur === b) {
          return true;
        }
      }
    }
    return false;
  }
  /**
   * LIST ITEM DRAP ENTERED
  */
  dragenter($event) {
    if (this.isbefore(this.source, $event.target)) {
      $event.target.parentNode.insertBefore(this.source, $event.target); // insert before
    }
    else {
      $event.target.parentNode.insertBefore(this.source, $event.target.nextSibling); //insert after
    }
  }


  /**
   * LIST ITEM DRAG STARTED
   */
  dragstart($event) {
    this.source = $event.target;
    $event.dataTransfer.effectAllowed = 'move';
  }

问题截图:

click to view this image

如屏幕截图所示，当我拖动任何 md-list-item 浏览器开始拖动所有内容，甚至从父组件开始。

Answer 1

使用event.currentTarget而不是 event.target 因为 md-list-item 嵌套了 div 而你需要移动 md-list-item

/**
 * LIST ITEM DRAP ENTERED
 */
dragenter($event) {
    let target = $event.currentTarget;
    if (this.isbefore(this.source, target)) {
        target.parentNode.insertBefore(this.source, target); // insert before
    }
    else {
        target.parentNode.insertBefore(this.source, target.nextSibling); //insert after
    }
}


/**
 * LIST ITEM DRAG STARTED
 */
dragstart($event) {
    this.source = $event.currentTarget;
    $event.dataTransfer.effectAllowed = 'move';
}

并禁用涟漪效应

<md-list-item [disableRipple]="true"

只能拖动一个项目

Plunker Example