1

在 Safari 11.1 (MacOS) 中拖动 Web 组件时，如果在 Web 组件的 Shadow DOM 中的子项上开始拖动，dragstart则紧随其后的是一个事件。dragend它在 Chrome 和 Firefox 中运行良好，如何在 Safari 中启用拖放功能？

这发生在没有外部库的 Web 组件构建以及使用 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 Web 组件

Codepen 仅使用本机 Web 组件

4

0 回答 0