no I was just showing how to disable user-select based on your initial question
On Tue, Oct 14, 2014 at 12:01 AM, Anders Holmgren <[email protected] > wrote: > 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]> >> 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</he >>>>>>>>> ader></div> >>>>>>>>> >>>>>>>>> <div class="column" draggable="true"><header>C</he >>>>>>>>> ader></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%40googl >>>>>> egroups.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 >>> <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 > <https://groups.google.com/d/msgid/polymer-dev/3206f01a-4902-4700-8f19-e1c788f05c09%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/CAJj5OwC%2Bg4dDFVEH6Qqp89x5JWHO%3Dr48qZ92Wy1PQwGPWi5pFA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
