Question

我正在尝试使用interact.js库来创建可拖动的Polymer事件。我知道存在一个core-drag-drop元素，我想使用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 DOMs元素进行交互。实施可能会改变，有一些问题需要注意：

Element.matches似乎总是因深度/阴影穿透选择器而失败。例如，尝试在https://polymer-project.org上运行此代码：

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

所以这样的选择器不适用于interact.js。
:host，::shadow，::content选择器会导致错误

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

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

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

这应该适用于本机和polyfilled Shadow DOM。

使用interact.js / shadowDOM选择器拖动聚合物

1 个答案: