Angular 6 (перетаскивание) привязка события не работает

Я создаю представление расписания, которое в настоящее время находится на предварительной стадии, где я добавляю события, а затем могу переставлять их, перетаскивая событие вертикально вверх или вниз или изменяя его размер по вертикали. Для изменения размера я нажимаю кнопку, содержащуюся в событии, и перетаскиваю ее вверх или вниз, чтобы изменить размер события. Для лучшего обзора взгляните на этот календарь с открытым исходным кодом. В настоящее время я столкнулся с проблемой перетаскивания моих элементов. Ни одно из событий перетаскивания не срабатывает, хотя другие (щелчок, наведение курсора мыши) работают. Ниже приведены отрывки из того, что я делал до сих пор. Пожалуйста, извините за мою работу, я все еще немного подзабыл в Angular.

* .component.html:

<table>
 <tbody *ngFor = "let item of FullHours; let i = index" >
  <tr [ngSwitch] = "returnItem(Doc)" [ngStyle] = "{'background-color':returnItem(Doc) === ',' ? 'white' : 'yellow' }">
   <td [style.height.px] = "unitHeight" >
    <div ondrop = "drop($event)" ondragover = "allowDrop($event)" *ngIf = "hasEvent(i)" class = "event-container" style = "background-color: white;">
     <div class = "event" draggable = "true" ondragstart = "drag($event)">
      <div style = "width:100%; float:left" class = "content">04:30PM -- 05:30PM</div>
       <div style = "width:100%; float:left" class = "content">event {{i}}</div>
        <button draggable = "true" (dragover) = "onDragOver($event)" (dragleave) = "onDragLeave($event)" (drop) = "onDrop($event)" class = "eventbtn" style = "position: absolute; left:0; right:0; bottom:0" >
        =
        </button>
       </div>
      </div>
     <div *ngIf = "!hasEvent(i)" (click) = "createEvent(i)" class = "event-container"></div>
    </td>
   </tr>
  </tbody>
 </table>

* .component.ts:

onDrop(event: any) {
 alert('on-drop');
 event.preventDefault();
 event.stopPropagation();
 // your code goes here after droping files or any
 //try to change height
}

onDragOver(evt) {
 alert('on-drag-over');
 evt.preventDefault();
 evt.stopPropagation();
}

onDragLeave(evt) {
 alert('on-drag-leave');
 evt.preventDefault();
 evt.stopPropagation();
}

Я поставил предупреждения обо всех связанных функциях, но ни одна из них не работает. Я пробовал это раньше со всем мероприятием, но это все равно не сработало. Я создал простые перетаскиваемые блоки div с кодом JavaScript, но даже они здесь не работают. Дайте мне знать, если мне нужно предоставить что-нибудь еще.

Я был бы благодарен за любое руководство, которое может заставить мою перетаскивание работать. Заранее спасибо.