使用HTML5拖放角度材料2 md-list

考虑以下组件模板，我试图实现对角度材质2和简单的li-tag的列表元素进行重新排序的能力。使用HTML5拖放角度材料2 md-list

此功能完全适用于锂标签标签，但未能在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浏览器开始拖拉所有的内容，甚至从父母零件。

来源

2017-05-17 Saif Ullah

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

来源

2017-05-17 16:46:32 yurzui

解决了主要问题，但是无论如何，我可以在重定向时保持连锁反应并在拖动时禁用它？ –

使用HTML5拖放角度材料2 md-list

回答

相关问题