StencilJS拖放

Question

我希望实现列表之间的拖放，比如Angular的cdkdroplist https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-lists

我该如何最好地将其实现到我的模板组件中呢？我能以某种方式使用上面提到的拖放api吗?如果可以:如何使用？如果没有，有没有其他我应该考虑的方法？

我不确定如何将这个Angular代码转换成我的模板语法：

<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>

Answer 1

使用sortablejs要简单得多。您将需要以下内容。

npm i sortablejs @types/sortablejs

然后构造两个ul列表，如下所示：

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

请参阅their page上的更多说明/示例。