使用 HTML5 拖放 Angular material 2 md-list

Question

考虑以下组件模板，我试图实现重新排序角度材料 2 和简单 li 标签的列表元素的能力。

此功能非常适合 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';
  }

问题截图：

点击查看图片

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

Answer 1

使用event.currentTarget而不是event.target因为在您需要移动时md-list-item嵌套了divmd-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 示例