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]
> <javascript:>> 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] <javascript:>.
>> 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/6830344f-4df8-4257-b62d-c2cff38cdd15%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
