角度素材2 md-listでHTML5のドラッグアンドドロップを使用する

Question

次のコンポーネントテンプレートを検討して、角度素材2と単純なliタグのリスト要素を並べ替える機能を実現しようとしています。

この機能は、Li-タグタグのために完璧に動作しますが、MD-リスト項目

ことが理由である場合には動作しませんか？

マイテンプレート：

<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-リストをスクリーンショットのように見えドラッグ-itemブラウザは、親からでもすべてのコンテンツのドラッグを開始します。コンポーネント。

Answer 1

利用event.currentTarget代わりのevent.target一つだけのアイテム

をドラッグできるようにする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" 

を移動する必要がありながらmd-list-itemはdivを入れ子にしているので、 Plunker Example