Thanks Rob What if the example looked more like http://jsbin.com/giveliwezuyu/1/edit would you still expect it to work?
This is more like my real example On Wednesday, 15 October 2014 03:59:13 UTC+11, Rob Dodson wrote: > > 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] > <javascript:>> 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%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] <javascript:>. >> 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/659a8767-94f7-43c3-9ead-900eb7f78d03%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
