alvarocastro/ember-draggable-modifiers

<Ui::Subsection @title="Windows 98">
  <p>
    <code>\{{draggable-item}}</code> allows the icons to be dragged around, and <code>\{{drop-target}}</code> is used for the whole container (the desktop) to capture the new drop coordinates, and also the trash bin icon to allow you to delete stuff.
  </p>

  <div class="desktop" {{drop-target onDrop=this.move}}>
    {{#each this.icons as |icon|}}
      <div
        class="desktop-icon"
        style={{icon.position}}
        {{draggable-item data=icon}}
      >
        <img src="{{icon.image}}" alt="{{icon.name}}" />
        <span>{{icon.name}}</span>
      </div>
    {{/each}}
    <div
      class="desktop-icon"
      style={{this.trash.position}}
      {{draggable-item data=this.trash}}
      {{drop-target onDrop=this.delete data=this.trash}}
    >
      <img src="{{this.trash.image}}" alt="{{this.trash.name}}" />
      <span>{{this.trash.name}}</span>
    </div>

    {{#if this.isFatalErrorState}}
      <div class="bsod d-flex justify-content-center align-items-center">
        <div class="message">
          <p class="title">
            <span>WINDOWS</span>
          </p>
          <p>An error has occurred.</p>
          <p>Press F5 to restart your computer. If you do this, you will lose any unsaved information in the current tab.</p>
        </div>
      </div>
    {{/if}}
  </div>
</Ui::Subsection>