LitElement: перетащите элементы с абсолютным позиционированием в определенный контейнер - PullRequest
Новая
       49

LitElement: перетащите элементы с абсолютным позиционированием в определенный контейнер

0 голосов
/ 08 апреля 2020

Я пытаюсь создать приложение, в котором можно перемещать элементы в указанном c контейнере (с фоновым изображением). Элементы позиционируются absolute, внешний контейнер позиционируется relative.

Код выглядит следующим образом: 

static get styles(): CSSResult {
    return css`
      :host {
        display: block;
        position: relative;
      }

      #itemWrapper {
        width: 800px;
        height: 400px;

        position: relative;
        background-image: url(../static/images/background.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }

      my-custom-item {
        position: absolute;
        cursor: pointer;
      }
    `;
  }

  protected render(): TemplateResult {
    return html`
        <div id='itemWrapper'>
            <my-custom-item id='item1' style='top:50px; left:100px;'></my-custom-item>
            <my-custom-item id='item2' style='top:150px; left:100px;'></my-custom-item>
            <my-custom-item id='item3' style='top:250px; left:100px;'></my-custom-item>
        </div>
    `;
  }

Я добавил некоторые обработчики событий в my-custom-item (подсказка: элементы генерируются через массив, чтобы я мог получить доступ к id) : 

<my-custom-item
    id='${item.id}'
    style='top:50px; left:100px;'
    draggable=true
    @dragstart="${(e: Event) => this._dragEvent('dragstart', e, item.id)}"
    @dragenter="${(e: Event) => this._dragEvent('dragenter', e, item.id)}"
    @dragover="${(e: Event) => this._dragEvent('dragover', e, item.id)}"
    @dragend="${(e: Event) => this._dragEvent('dragend', e, item.id)}"
    @dragleave="${(e: Event) => this._dragEvent('dragleave', e, item.id)}"
    @drop="${(e: Event) => this._dragEvent('drop', e, item.id)}">
</my-custom-item>

И метод _dragEvent() выглядит следующим образом (, как на GitHub ): 

protected _dragEvent(eventType: string, evt: Event, itemId: string | number | undefined) {
    console.log('eventType', eventType);
    console.log('evt', evt);
    console.log('itemId', itemId);

    switch (eventType) {
      case 'dragstart':
        this._activeDragItem = this.shadowRoot?.querySelector(`#${itemId}`);
        break;
      case 'dragenter':
        if (this._activeDragItem == null) return;
        this._moveItem(this._activeDragItem, itemId);
        evt.preventDefault();
        break;
      case 'dragover':
        evt.preventDefault();
        break;
      case 'dragleave':
        if (this._activeDragItem == null) return;
        break;
      case 'drop':
        if (this._activeDragItem == null) return;
        this._moveItem(this._activeDragItem, itemId);
        break;
      case 'dragend':
        if (this._activeDragItem == null) return;
        this._activeDragItem = null;
        break;

    }
}

protected _moveItem(item: any, itemId: string | number | undefined) {
    console.log('moving', item);
}

Но элементы не могут быть перемещены и Я не понимаю, почему это не работает. drop никогда не срабатывает ... Может кто-нибудь дать подсказку или рабочий пример перетаскивания предметов? Не только "сортировка списка".

Заранее большое спасибо.

1 Ответ

0 голосов
/ 09 апреля 2020

вы можете попытаться добавить draggable="true" к вашему элементу.

Также вы можете проверить эту документацию: HTML Перетащите или Перетаскиваемый элемент с абсолютным положение

...