As an aside, to confirm Rob's earlier assertion: because core-list virtualizes the view items associated with the data, you shouldn't rely on directly manipulating the DOM created by core-list. Drag-and-drop reordering will likely need to be a feature of core-list itself; there are a few higher priority features of core-list that we'll need to land before any work would start on that.
Thanks, Kevin On Tue, Oct 14, 2014 at 4:08 PM, Anders Holmgren <[email protected]> wrote: > 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]> >> 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/10718784980935 >>>>>>>>>> 4688692 >>>>>>>>>> --- >>>>>>>>>> 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%40googl >>>>> egroups.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/CAHW5_6w5grK%3D4STAFOY1MA3L288OuDM7CGK8bDPO-HN0gd9PJg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
