时间戳

首页 > 解决方案 > StencilJS 拖放

angular - StencilJS 拖放

问题描述

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

我将如何最好地在我的 Stencil 组件中实现这一点？我可以以某种方式使用上面引用的拖放 api，如果可以：如何？如果没有，我应该考虑另一种方法吗？

我不确定如何将此 Angular 代码转换为我的 Stencil 语法：

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

标签： angulardrag-and-dropjsxweb-componentstenciljs

解决方案

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

npm i sortablejs @types/sortablejs

然后构造两个ul类似如下的列表：

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

在他们的页面上查看更多说明/示例。

推荐阅读