alvarocastro/ember-draggable-modifiers

<Ui::Subsection @title="Shared Lists">

  <p>
    By playing with both <code>group</code> and <code>accepts</code> properties, you can manage where items can be dragged and dropped from different lists.
  </p>

  <p>
    In this example, the top list accepts drops from both top and bottom lists, while the bottom list only accepts drops from the top one.
  </p>

  <div class="row">
    <div class="col-md-8">
      <Ui::Code @code={{this.jsCode}} @lang="js" />
      <Ui::Code @code={{this.hbsCode}} @lang="hbs" />
    </div>
    <div class="col-md-4">
      <ul class="list-group mb-3">
        {{#each this.itemsTop as |item|}}
          <li
            {{sortable-item
              data=item
              group="itemsTop"
              accepts=(array "itemsTop" "itemsBottom")
              onDrop=this.move
            }}
            class="list-group-item"
          >
            {{item}}
          </li>
        {{/each}}
      </ul>
      <ul class="list-group mb-3">
        {{#each this.itemsBottom as |item|}}
          <li
            {{sortable-item
              data=item
              group="itemsBottom"
              accepts="itemsTop"
              onDrop=this.move
            }}
            class="list-group-item"
          >
            {{item}}
          </li>
        {{/each}}
      </ul>
    </div>
  </div>
</Ui::Subsection>