在Safari中拖放Web组件

Question

在Safari 11.1（MacOS）中拖动Web组件时，如果在Web组件的Shadow DOM中的子级上开始拖动，则dragstart之后会立即发生dragend事件。 在Chrome和Firefox上运行良好，如何在Safari中启用拖放功能？

在Web组件构建without external library以及using 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 using Polymer 3 Web Components

Codepen using only native Web Component