any hope of making this work with a dom-repeat? about polymer-dragula HOT 6 OPEN

I've had some success, but not there yet.

Some issues. I had to 'hack' polymer-dragula to find the template and add an event listener for dom-change, and only then add the container. I had to duplicate the style of the dragged item into the global style, including making it position: fixed, and some other adjustments. BTW, if I don't make it position: fixed, the positioning doesn't work and it is stuck at the top of the screen.

The issue that remains is that I am unable to 'drop'. When the item was not position: fixed, the drag item is at the top of the screen rather than under the cursor, then I can drop, but once it is positioned correctly, it isn't possible to drop it.

NB, if I add some 'tranform: translatex(-35px)', then it isn't under the cursor and I am able to drop the item.

Any ideas welcome.

from polymer-dragula.

I'm wondering, would turning off shadow DOM help here? Removing the <dom-module> tag could really make sense here.

from polymer-dragula.

Sorry, I don't quite understand. Shadow dom is inherent to web components, as is dom-module. I guess I'm misunderstanding you...could you explain a bit more?

from polymer-dragula.

You can remove this line with <dom-module> for your view controlling elements, then multiple elements should "see each other".
The more I work with polymer the more I see that for at least for "view elements" we should just create elements without shadow dom on. It solves some headaches related to styling, and cross component visibility.

from polymer-dragula.

Hi, do you have a demo showing how drag drop works on items created dynamically within a dom-repeat. Much appreciate your help on this.

from polymer-dragula.

it works for me in polymer 1.6 replacing <slot> by <content>

Good job man !
sample

`

    <polymer-dragula id="column-dragger" sub-container-selector=".col-holder" fn-moves="[[fnMovesInner]]">
        <polymer-dragula id="row-dragger" fn-moves="[[fnMoves]]">
            <div class="row-holder">
                <template is="dom-repeat-n" count="{{depth}}">
                    <div class="vertical">
                        <div class="col-holder">
                            <template is="dom-repeat" items="{{computeGetChildren(index)}}">
                                <div class="card">
                                    <strong class="handle-inner">drag handle</strong>
                                    <p>[[item.name]]</p>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </polymer-dragula>
    </polymer-dragula>

`

from polymer-dragula.