+ 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% >>> 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/CAJj5OwDADz8V6Z6QzZ_K5wpA6%3DugDciho4CPA3XeGLYCjGsPNg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
