mit HTML5 Drag & Drop mit eckigen Material 2 md-Liste

Question

Betrachten Sie die folgende Komponente Vorlage, ich versuche, die Fähigkeit zu erreichen, Listenelemente für eckiges Material 2 und einfache Li-Tag neu zu ordnen.

Diese Funktionalität funktioniert perfekt für li-Tag Tag aber nicht bei md-list-item

warum arbeiten ist das?

Meine Vorlage:

<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> 

Called Funktionen:

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'; 
    } 

Screenshot der Ausgabe:

click to view this image

im Screenshot Wie sichtbar ist, wenn ich ziehen Sie einen beliebigen md-Liste - Der Browser beginnt mit dem Ziehen aller Inhalte, selbst vom übergeordneten Objekt Komponente.

Answer 1

Verwenden event.currentTarget statt event.target weil md-list-item hat div verschachtelt, während Sie 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'; 
} 

und deaktivieren Kräuselungeffekt

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

der Lage sein, sich bewegen müssen nur ein Element ziehen

Plunker Example