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</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%40googl >>>>>> egroups.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 > <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/CAJj5OwAovcj7fn5X3tfdUjL9ptZoSv3TRb0%3DBmTHktK-O5WMJQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
