Полимер, который можно перетаскивать с помощью селектора Interact.js/shadowDOM

Я пытаюсь использовать библиотеку взаимодействия.js для создания перетаскиваемого события Polymer. Я знаю, что существует элемент core-drag-drop, я хотел бы использовать интерактивность.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"

Все возвращают ноль.

Я также попытался назначить и передать ссылку на один объект, который имеет класс .draggable:

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

Это тоже не работает. Любой совет?

РЕДАКТИРОВАТЬ:

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

javascript css-selectors polymer shadow-dom interact.js
person andrsnn    schedule 25.12.2014    source источник
comment
Как выглядит теневое дерево? Если элемент .draggable является теневым, то :host(.draggable) и :host-context(.draggable) неверны.   -  person BoltClock    schedule 25.12.2014
comment
Это. Элемент .draggable находится в шаблоне пользовательских элементов. Извините, я добавлю дерево   -  person andrsnn    schedule 25.12.2014
comment
В последней версии селекторы Interact.js не достигают элементов в теневых DOM, а использование элементов напрямую вызывает ошибки. Я автор интерактивного.js, и я работаю над несколькими исправлениями, чтобы лучше обрабатывать теневые DOM.   -  person taye    schedule 29.12.2014
comment
понял, спасибо, что нашли время ответить! Буду продолжать следить за обновлениями.   -  person andrsnn    schedule 29.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

Начиная с версии 1.2.3 интерактивного.js вы должны иметь возможность взаимодействовать с элементами Shadow DOM. Реализация может измениться, и есть некоторые проблемы, о которых следует знать:

  1. Element.matches кажется, всегда терпит неудачу с селекторами глубокого/теневого пронзания. Например, попробуйте запустить это на https://polymer-project.org:

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

    Так что такие селекторы не будут работать с интерактивом.js.

  2. Селекторы :host, ::shadow, ::content вызывают ошибки при использовании с полифиллом Shadow DOM.

В вашем случае, поскольку элемент, на который вы хотите настроить таргетинг, находится в ShadowDOM, а глубокие селекторы не работают, вам следует добавить к элементу более конкретный класс. Например:

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

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

Это должно работать как с нативным, так и с полифиллированным Shadow DOM.

person taye    schedule 30.12.2014
comment
Ваша ссылка на эту версию не работает. Не могли бы вы обновить? Спасибо! - person andrsnn; 27.03.2015
comment
@ user2210274 Готово. Спасибо за комментарий. - person taye; 29.03.2015