Thanks Günter. Yes I agree the problem seems to revolve around the fact that I'm trying to style the distributed nodes of the content element. However, it would greatly surprise me if this was not possible. It would seem to me a major oversight in web components / polymer if that wasn't possible.
Incidentally I have a temporary partial workaround / hack by including a containing div in the test-row and making that draggable. It works but it means the draggable-list-item can hardly be considered a reusable component. Surely this shouldn't be necessary. Is Eric Bidelman on this list? Surely he knows whether this is or isn't possible with the web component css selectors and polymer. On Monday, 13 October 2014 22:19:55 UTC+11, Günter Zöchbauer wrote: > > I didn't have a very detailed look at the code but I guess it should work > the way that you drag-n-drop the element and when it is dropped you modify > the model to reflect the new item order. > The problem I see here is that the [draggable] is on a tag in the > shadowDOM and the text is in the content > > <polymer-element name="xx-yy"> > <template> > <div [draggable="true"]> > <!-- The text is projected into this content tag. The text isn't > selectable but also not draggable, Drag only works if it is started > outside of the text/content (on the div above) --> > > <content></content> > </div> > </template> > </polymer-element> > > > > On Sunday, October 12, 2014 9:42:30 PM UTC+2, Rob Dodson wrote: >> >> + Kevin, who can correct me >> >> I'm imagining that this could be a thorny problem. The core-list is >> generated by a model and we usually recommend against rearranging DOM >> that's output from a model. Instead it's preferable to manipulate the model >> and let it re-render. core-list, in particular, is a virtualized list >> designed for lots and lots of rows, so moving its DOM around could cause >> issues. >> >> On Sun, Oct 12, 2014 at 12:01 PM, Anders Holmgren <[email protected]> >> wrote: >> >>> The issue I am trying to address is the fact that I can't drag the item >>> when the mouse is over the text. In Eric's original example he solved this >>> via the css rule >>> >>> [draggable] { >>> -moz-user-select: none; >>> -khtml-user-select: none; >>> -webkit-user-select: none; >>> user-select: none; >>> } >>> >>> >>> However, when I try to adapt this example to use web components I am not >>> able to get such a css rule working. Now the text items are coming via the >>> distributed nodes of the *content* element. That is why I am using >>> */deep/* to try to bust through to the distributed nodes. >>> >>> The reason I am interested in doing this is because I am trying to build >>> a reusable web component that allows me to drag and drop items in a >>> *core-list* >>> >>> So for example if you have a core-list like >>> >>> <core-list-dart height="100" data="{{data}}"> >>> <template> >>> <test-row data="{{self}}"></test-row> >>> </template> >>> </core-list-dart> >>> >>> Then I want to be able to make the rows draggable so I can reorder them. >>> I've tried several different options. The most recent is this form >>> >>> <core-list-dart height="100" data="{{data}}"> >>> <template> >>> <draggable-list-item> >>> <test-row data="{{self}}"></test-row> >>> </draggable-list-item> >>> </template> >>> </core-list-dart> >>> >>> Where I have a reusable polymer element *draggable-list-item* that >>> encapsulates all the drag and drop logic >>> >>> cheers >>> >>> Anders >>> >>> On Monday, 13 October 2014 04:19:00 UTC+11, Elliott Sprehn wrote: >>>> >>>> Your selectors look backwards. I think you want * /deep/ [draggable] { >>>> ... }; Note that using universal attribute selectors like that with /deep/ >>>> rules is not particularly good for performance, you'd be better off >>>> putting >>>> it inside the components that you're using the draggable attribute in. >>>> >>>> On Sat, Oct 11, 2014 at 5:23 PM, Anders Holmgren <[email protected]> >>>> wrote: >>>> >>>>> Do I need to be using something like polyfill-next-selector or >>>>> shim-shadowdom? I tried putting shim-shadowdom everywhere but no effect. >>>>> I'm not sure how I would express the polyfill-next-selector in this case. >>>>> >>>>> Interestingly I get totally different behaviour in this example with >>>>> the latest chrome, firefox and safari >>>>> - chrome simply doesn't let me drag if I try to drag on the text >>>>> - firefox actually seems to work >>>>> - safari kinda works but if I drag on the text it shows only the text >>>>> getting dragged >>>>> >>>>> Any pointers appreciated. I'm kinda desperate here as I've been >>>>> struggling for the better part of a week to get draggable items in >>>>> core-list working. First with core-drag-drop then when I couldn't get >>>>> that >>>>> to work, going back to native html 5 dnd >>>>> >>>>> >>>>> >>>>> On Friday, 10 October 2014 09:42:01 UTC+11, Anders Holmgren wrote: >>>>>> >>>>>> I'm trying to get the equivalent of Eric Bidelman's >>>>>> http://www.html5rocks.com/en/tutorials/dnd/basics/ working with >>>>>> polymer >>>>>> >>>>>> so in place of >>>>>> >>>>>> <div id="columns"> >>>>>> >>>>>> <div class="column" draggable="true"><header>Abracadabra >>>>>> </header></div> >>>>>> >>>>>> <div class="column" draggable="true"><header>B</header></div> >>>>>> >>>>>> <div class="column" draggable="true"><header>C</header></div> >>>>>> >>>>>> </div> >>>>>> >>>>>> >>>>>> I have >>>>>> >>>>>> >>>>>> >>>>>> <div id="columns"> >>>>>> <basics-poly>Abracadabra</basics-poly> >>>>>> >>>>>> <basics-poly>B</basics-poly> >>>>>> >>>>>> <basics-poly>C</basics-poly> >>>>>> >>>>>> </div> >>>>>> >>>>>> >>>>>> and >>>>>> <polymer-element name="basics-poly"> >>>>>> >>>>>> >>>>>> <template> >>>>>> >>>>>> <style> >>>>>> ... >>>>>> </style> >>>>>> >>>>>> >>>>>> <div id="column" class="column" draggable="true"> >>>>>> >>>>>> <header><content></content></header> >>>>>> >>>>>> </div> >>>>>> >>>>>> </template> >>>>>> >>>>>> ... >>>>>> >>>>>> </polymer-element> >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> In the original version the following was needed to stop text fields >>>>>> etc from being selectable >>>>>> >>>>>> >>>>>> [draggable] { >>>>>> >>>>>> >>>>>> -moz-user-select: none; >>>>>> >>>>>> -khtml-user-select: none; >>>>>> >>>>>> -webkit-user-select: none; >>>>>> >>>>>> user-select: none; >>>>>> >>>>>> } >>>>>> >>>>>> >>>>>> I can't find the equivalent for polymer / web components. My first >>>>>> attempt was >>>>>> >>>>>> [draggable] /deep/ *{ >>>>>> >>>>>> And based on advice from SO (http://stackoverflow.com/ques >>>>>> tions/26271903/preventing-the-contents-of-draggable-polymer- >>>>>> elements-from-being-selectable?noredirect=1#comment41226052_26271903) >>>>>> I've tried >>>>>> >>>>>> [draggable], [draggable] /deep/ *, [draggable]::content *, [draggable >>>>>> ]::content /deep/ * { >>>>>> >>>>>> I've tried many other variants too but nothing works >>>>>> >>>>>> What should I set the selector to in this case? >>>>>> >>>>>> BTW full source for this example is https://bitbucket.org/ander >>>>>> smholmgren/ah_polymer_stuff/src/7f88d253fe98428e280c1fa4aceada >>>>>> 1792a686e1/test/demo/?at=master >>>>>> >>>>>> >>>>>> - index.html is non polymer and works >>>>>> - index_poly.html is the polymer version that doesn't work >>>>>> >>>>>> thanks >>>>>> >>>>>> Anders >>>>>> >>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>>> --- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Polymer" group. >>>>> To unsubscribe from this group and stop receiving emails from it, send >>>>> an email to [email protected]. >>>>> To view this discussion on the web visit https://groups.google.com/d/ >>>>> msgid/polymer-dev/3bb53997-0007-404d-abd8-41194e4a8df0% >>>>> 40googlegroups.com >>>>> <https://groups.google.com/d/msgid/polymer-dev/3bb53997-0007-404d-abd8-41194e4a8df0%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>> . >>>>> >>>>> For more options, visit https://groups.google.com/d/optout. >>>>> >>>> >>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>> --- >>> You received this message because you are subscribed to the Google >>> Groups "Polymer" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/polymer-dev/9dd992c5-77c4-4302-b7eb-e4e1a0db24a8%40googlegroups.com >>> >>> <https://groups.google.com/d/msgid/polymer-dev/9dd992c5-77c4-4302-b7eb-e4e1a0db24a8%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/900d2105-a8bc-4671-bb8e-4617c135c972%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
