html - استفاده از کشیدن و رها کردن HTML5 با Angular material 2 md-list

الگوی کامپوننت زیر را در نظر بگیرید، من در حال تلاش برای دستیابی به قابلیت مرتبسازی مجدد عناصر فهرست برای Angular Material 2 و تگ li ساده هستم.

این قابلیت برای تگ li کاملاً کار میکند اما در مورد 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 را میکشم، مرورگر شروع به کشیدن تمام محتوا حتی از مؤلفه والد میکند.

پاسخ شماره ۱

به جای event.target از event.currentTarget استفاده کنید زیرا 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