可通过 interact.js / shadowDOM 选择器拖动的聚合物

Question

我正在尝试使用 interact.js 库来创建一个可拖动的 Polymer 事件。我知道存在一个核心拖放元素，我想使用interact.js。我试图通过将一个类传递给交互对象来使第一个示例工作。

interact('.draggable').draggable({....

这在 Polymer 中不起作用，因为它必须访问元素 shadowDOM。我尝试了以下选择器：

"custom-elem::shadow .draggable"
":host-context(.draggable)"
":host(.draggable)"
"custom-elem /deep/ .draggable"
"drop::shadow .draggable"
"custom-elem::shadow .draggable"

全部返回null。

我还尝试分配和传递对具有 .draggable 类的单个对象的引用：

var x = this.shadowRoot.querySelector(".draggable");
interact(x).draggable({....

这也不起作用。 有什么建议吗？

编辑：

<polymer-element name="custom-elem">
<template>
<div class="draggable"></div>
</template>
</polymer-element>

Answer 1

从interact.js 1.2.3 版本开始，您应该能够与Shadow DOM 元素进行交互。实施可能会发生变化，需要注意一些问题：

1. Element.matches 似乎总是使用深/阴影穿透选择器失败。例如，尝试在 https://polymer-project.org 上运行它：

   var selector = 'paper-button::shadow *'; document.querySelector(selector).matches(selector); // false

   所以这样的选择器不适用于interact.js。

2. :host、::shadow、::content 选择器如果与 Shadow DOM polyfill 一起使用会导致错误

在您的情况下，由于您要定位的元素位于 ShadowDOM 中，并且深度选择器不起作用，您应该为元素添加更具体的类。例如：

<polymer-element name="custom-elem">
<template>
<div class="custom-elem-draggable"></div>
</template>
</polymer-element>

interact('.custom-elem-draggable').draggable(/* ... */);

这应该适用于本机和填充阴影 DOM。