alvarocastro/ember-draggable-modifiers

<Ui::Subsection @title="Drag handle">
  <p>
    You can specify the dragging handle element using the <code>\{{draggable-item-handle}}</code>. This will override the default behaviour of making the whole item draggable.
  </p>

  <Ui::Alert::Info>
    Alternatively, the <code>\{{draggable-item}}</code> and <code>\{{sortable-item}}</code> modifiers can receive an element reference via the <code>dragHandleElement</code> option to act as the handle.
  </Ui::Alert::Info>

  <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.items as |item|}}
          <li
            {{sortable-item data=item onDrop=this.move}}
            class="list-group-item"
          >
            <i class="fa-solid fa-grip-lines me-2" {{draggable-item-handle}}></i>
            {{item}}
          </li>
        {{/each}}
      </ul>
    </div>
  </div>
</Ui::Subsection>