Using HTML5 drag and drop with Angular material 2 md-list
Consider the following component pattern, I am trying to achieve the ability to reorder list items for angular material 2 and a simple li tag.
This functionality works fine for li-tag, but doesn't work for md-list-item
why?
My template:
<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 functions:
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:
As you can see in the screenshot, when I drag and drop any md-list browser, the browser starts dragging all content even from the parent component.
source to share
Use event.currentTarget instead event.target
because it md-list-item
has a nested div
while you need to movemd-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';
}
and turn off the ripple effect
<md-list-item [disableRipple]="true"
to be able to drag only one element
source to share