带有 web 组件、发光元素、polymer 的拖放列表

Question

I am trying to create a simple list of 'cards' that I can re-order by dragging and dropping.

I came across this fluid-grid web component and have had some success. I have created a list of cards and I can drag them around. The problem is, how to handle the 'drop' event so that I can update the location of the dropped item in the list.

Here is my code:

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

Answer 1

In LitElement you don't need the on... prefix. Replace @ondrop and ondrop with @drop - currently that's only on the <paper-card> element.

Also note that if you want to access the elements being dragged over you may need to use e.relatedTarget.getRootNode().host to get the actual custom element, as the event fires from an element that may be nested in the shadow DOM for your component.