Hello Anders, do you have a working example you can share? Thanks, Chuck
On Wednesday, October 15, 2014 6:42:35 PM UTC-7, Anders Holmgren wrote: > > 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]> >> 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/ >>>>>>>>>>>>> andersmholmgren/ah_polymer_stuff/src/ >>>>>>>>>>>>> 7f88d253fe98428e280c1fa4aceada1792a686e1/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/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/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/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/1feeddb0-cb7a-47e0-9c2a-b36164f1f170%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
