如果在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>