Draggable: Polymer 3 and Web Components

[ralcar]

Please use this template to help contributors get a detailed description of the issue or feature.

For support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

1. Apply either the bug or feature-request label

Cant find the label sidebar..

2. Describe the bug or feature

Trying to make this project work with Polymer 3.0 and the LitElement (lit-html).
Cant reference via npm since its not in esmodules (please add!), but using the CDN script tag.
I setup the Draggable most default example in the _firstRendered() (tried other places also), but the items wont become draggable. Here is my code:

<div class="drag">
 <div class="draggable-source">Please drag me</div>
</div>

...

_firstRendered() {
  const draggable = new Draggable.Draggable(this._root.querySelectorAll(".drag"));

  draggable.on('drag:start', () => console.log('drag:start'));
  draggable.on('drag:move', () => console.log('drag:move'));
  draggable.on('drag:stop', () => console.log('drag:stop'));
  draggable.on('draggable:initialize', () => console.log('draggable:initialize'));
}

tried different combos for the constructor of Draggable, passing it which classnames to be draggable etc. Am i right to think that its the Shadow DOM that stops it from working? Since this does not yield a result: document.querySelector('.drag')?

3. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

4. Please tell us about your environment:

• Library version: [1.0.0-beta.7]
• Browsers: [Chrome 66]
• Tech stack: [Polymer 3 | lit-html | WebComponents]

[tsov]

Am i right to think that its the Shadow DOM that stops it from working?

Unfortunately yes, but supporting Shadow DOM is a big goal for us and currently being worked on 👍 Expect it to be one of the next features we release

[ralcar]

VERY happy to hear that! The library looks awsome, was really sad when i realized that it didnt work.
In fact almost no drag library works for ShadowDOM, everything is either built on jQuery and has loads of dependencies, or its all for React, so very happy to hear that us WebComponent people are getting some love finally 😄

[ralcar]

Please work in this! 😄
I follow every commit right now like a true stalker 😄

[JosefJezek]

duplicate of https://github.com/Shopify/draggable/issues/153

[safinazward]

I was trying to do the same but it did not work with shadow DOM.
I hope the support for shadow DOM will be ready soon

[ralcar]

@tsov Can i ask if this is worked on at all or if i should try to find other solution?

[beefchimi]

@ralcar I am not sure what the status of this is and I have not heard from @tsov about it so I think you will need to find another solution. Sorry 😞

[aletorrado]

Any update about this feature?

[klaussa]

+1