Question

我正在构建一个计划视图，该视图目前处于初步阶段，我在其中添加事件，然后可以通过垂直向上或向下拖动事件或垂直调整其大小来重新安排它们。为了调整大小，我将单击事件中包含的按钮并将其上下拖动以调整事件的大小。为了获得更好的视图，请查看this opensource calendar。我目前在使元素可拖动时遇到一个问题。尽管其他事件（单击，鼠标悬停）都起作用，但是所有拖动事件均不会触发。以下是我到目前为止所做的摘要。请原谅我的工作，我对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();
}

我对所有绑定的函数都发出了警报，但是它们都不起作用。我在整个活动中也确实尝试过此操作，但仍然无法正常工作。我已经用JavaScript代码创建了简单的拖放div，但即使是那些在这里也不起作用。让我知道是否需要提供其他任何东西。

对于任何可以使我的拖放工作正常进行的指导，我将不胜感激。预先感谢。

Angular 6（拖动）事件绑定不起作用

0 个答案: