OK thanks for the heads up. It seems to be working in that regard at the moment so if it breaks in the future I'll have to switch to template repeat. Mind you I first manipulate the dom while the user drags then on drop I fire an event and update the model. Maybe that's why I get away with it.
Great to hear that you are considering adding dnd to core-list itself. That's really what I want to happen and my current attempts are just a workaround till you implement it. cheers Anders On Wednesday, 15 October 2014 13:06:55 UTC+11, Kevin Schaaf wrote: > > 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] > <javascript:>> 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/e38feda4-1793-4cff-a394-44ec5e8dfbc3%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
