---------- Forwarded message ---------- From: Anders Holmgren <[email protected]> Date: 13 October 2014 06:59 Subject: Re: [polymer-dev] Re: How to do equivalent of "[draggable] {" in polymer To: Rob Dodson <[email protected]>
Well I actually have it working, except for this issue about not being able to drag on the text. You can try it out if you want. If you check out the project at ah_polymer_stuff <https://bitbucket.org/andersmholmgren/ah_polymer_stuff> and run /test/reorderable_list.html <https://bitbucket.org/andersmholmgren/ah_polymer_stuff/src/7f88d253fe98428e280c1fa4aceada1792a686e1/test/reorderable_list.html?at=master> you can see that drag and drop works if you select at the top or bottom of each row. If you select on the text (or the rest of that line) it doesn't. I'm actually using this on another project where I have 30-50 rows and it seems to work fine. core-list can be rather slow but I believe there are speed fixes in that should hit the next release if I'm not mistaken On 13 October 2014 06:42, Rob Dodson <[email protected]> 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</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/CAEXrLxoLu%2B9-ajkLr9oKn6QP4kiEVvsecKZaonBqm3kQEyqkNQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
