带有网络组件、发光元素、聚合物的拖放列表答案

【问题标题】：Drag and drop list with web-components, lit-element, polymer带有网络组件、发光元素、聚合物的拖放列表
【发布时间】：2020-06-09 13:13:10
【问题描述】：

我正在尝试创建一个简单的“卡片”列表，我可以通过拖放重新排序。

我遇到了this fluid-grid web component 并取得了一些成功。我创建了一个卡片列表，我可以拖动它们。问题是，如何处理 'drop' 事件，以便我可以更新列表中被删除项目的位置。

这是我的代码：

import {LitElement, html, customElement, property, css} from 'lit-element';
import { repeat } from 'lit-html/directives/repeat'
import '@fluidnext-polymer/paper-grid';
import '@polymer/paper-card/paper-card'

interface VaadinRouterLocation {
  baseUrl?: string
  params?: {
    id: string
  }
  pathname?: string
  route?: {
    path: string
    component: string
    search: string
  }
}
@customElement('my-element')
export class MyElement extends LitElement {
  static styles = css`
    :host {
      display: block;
      border: solid 1px gray;
      padding: 16px;
      max-width: 800px;
    }
  `;

  @property({type: Object})
  location:VaadinRouterLocation = {};
  constructor() {
    super(); 
  }
  @property({type: Array})
  tasks = [
    {"name": "Task 1", "sequence": 1, "id": "A"},
    {"name": "Task 2", "sequence": 2, "id": "B"},
    {"name": "Task 3", "sequence": 3, "id": "C"},
  ] 
  render() {
    return html`
      <div id="container" @ondrop="(e) => console.log(e.target)">
        <paper-grid animated id="grid" draggable cell-margin="5" col-count="2" row-count="${this.tasks.length}" ondrop="(e) => console.log(e.target)">
        ${repeat(this.tasks, (task) => html`
          <paper-card col="0" row=${task.sequence} height="1" width="1" @drop="${this.handleDrop}">
              <div class="card-content">${task.name}</div>
            </paper-card>
        `)}
        </paper-grid>
    </div>
    `
  }


  handleDrop(e:any) {
    console.log("Event", e)
  }
  allowDrop(e:any){
    e.preventDefault()
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'my-element': MyElement;
  }
}

【问题讨论】：

标签： javascript polymer web-component lit-element

【解决方案1】：

在 LitElement 中，您不需要 on... 前缀。将 @ondrop 和 ondrop 替换为 @drop - 目前仅在 <paper-card> 元素上。

另外请注意，如果您想访问被拖动的元素，您可能需要使用e.relatedTarget.getRootNode().host 来获取实际的自定义元素，因为该事件从可能嵌套在您的组件的影子 DOM 中的元素触发。

【讨论】：