HTML Template for Drag & Drop Demo LWC | Dropzone

dragAndDrop.html

<article
  class="slds-card dropzone card-height"
  ondragover={handleDragOver}
  ondragleave={handleDragLeave}
  ondrop={handleDrop}
>
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <span class="slds-icon_container">
          <lightning-icon
            icon-name="utility:table"
            alternative-text="utility:table"
            title="Drop"
            size="small"
          ></lightning-icon>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 class="slds-card__header-title">Dropzone</h2>
      </div>
    </header>
  </div>
  <div class="slds-card__body">
    <div class="datatable-height">
      <lightning-datatable
        key-field="id"
        columns={columns}
        data={data}
        hide-checkbox-column
      ></lightning-datatable>
    </div>
  </div>
</article>