StencilJS drag and drop

Question

I wish to implement a drag and drop between lists such as Angular's cdkdroplist https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-lists

How would I best go about implementing this into my Stencil component? Can I use the above referenced drag and drop api in some way, and if so: how? If not, is there another approach i should consider?

I am unsure how i would translate this Angular code into my Stencil syntax:

<div
  cdkDropList
  #todoList="cdkDropList"
  [cdkDropListData]="todo"
  [cdkDropListConnectedTo]="[doneList]"
  class="example-list"
  (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>

t7tran t7tran · Accepted Answer · 2020-05-24T07:51:01

It is much simpler to use sortablejs. You will need the following.

npm i sortablejs @types/sortablejs

Then construct two ul lists with similar to the following:

<ul>
    {
        this.items.map(i =>
            <li data-id={i.id}>{i.text}</li>
        )
    }
</ul>

See more instructions/exampls on their page.

StencilJS drag and drop

1 Answers