Thanks Rob. Am I supposed to be able to drag the rows in the example? If so it's not working for me (chrome or firefox)
On Tuesday, 14 October 2014 11:07:45 UTC+11, Rob Dodson wrote: > > You should be able to do core-list /deep/ [draggable] to disable > user-select > > ex: http://jsbin.com/xiqava/3/edit > > On Mon, Oct 13, 2014 at 4:57 PM, Anders Holmgren <[email protected] > <javascript:>> wrote: > >> 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] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/900d2105-a8bc-4671-bb8e-4617c135c972%40googlegroups.com >> >> <https://groups.google.com/d/msgid/polymer-dev/900d2105-a8bc-4671-bb8e-4617c135c972%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/3206f01a-4902-4700-8f19-e1c788f05c09%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
