如果在Web组件的Shadow DOM中的子项上开始拖动,则在Safari 11.1(MacOS) dragstart 中拖动Web组件时会立即跟随 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