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]
> <javascript:>> 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/
>>> questions/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/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] <javascript:>.
>> 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.
For more options, visit https://groups.google.com/d/optout.
