Перетаскивание с помощью веб-компонентов в Safari - PullRequest
Новая
       26

Перетаскивание с помощью веб-компонентов в Safari

0 голосов
/ 24 июня 2018

При перетаскивании веб-компонента в Safari 11.1 (MacOS) за dragstart сразу же следует событие dragend, если перетаскивание начинается с дочернего элемента в теневом DOM веб-компонента. Он отлично работает в Chrome и Firefox, как включить перетаскивание в Safari?

Это происходит для сборки веб-компонентов без внешней библиотеки , а также при использовании Polymer 3 .

Например, перетаскивание <drag-item> работает, но перетаскивание включенного <div class="child"> не работает. 

import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class DragItem extends PolymerElement {
  static get template() {
    return html`
      <style>
      :host {
        user-select:none; background-color: green; width: 80px; height: 80px; display: block; margin: 10px;
      }
      .child {
        background-color: red; width: 20px; height: 20px; display: block; margin: 0 auto;
      }
      </style>
      <div class="child"></div>
    `;
  }
}
customElements.define('drag-item', DragItem);

При использовании так: 

<div>
  <drag-item draggable="true"></drag-item>
  <drag-item draggable="true"></drag-item>
  <drag-item draggable="true"></drag-item>
  <drag-item draggable="true"></drag-item>
</div>

Codepen с использованием веб-компонентов Polymer 3

Codepen с использованием только собственного веб-компонента

...