How to do equivalent of "[draggable] {" in polymer

[Anders Holmgren]

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/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

[Anders Holmgren]

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

[Elliott Sprehn]

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.

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/3bb53997-0007-404d-abd8-41194e4a8df0%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Anders Holmgren]

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

[Rob Dodson]

+ 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.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9dd992c5-77c4-4302-b7eb-e4e1a0db24a8%40googlegroups.com.

[Anders Holmgren]

---------- Forwarded message ----------
From: Anders Holmgren <andersm...@gmail.com>
Date: 13 October 2014 06:59
Subject: Re: [polymer-dev] Re: How to do equivalent of "[draggable] {" in polymer
To: Rob Dodson <robd...@google.com>

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  and run  /test/reorderable_list.html 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

[Günter Zöchbauer]

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>

[Anders Holmgren]

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.

[Rob Dodson]

You should be able to do core-list /deep/ [draggable] to disable user-select

ex: http://jsbin.com/xiqava/3/edit

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/900d2105-a8bc-4671-bb8e-4617c135c972%40googlegroups.com.

[Günter Zöchbauer]

This doesn't look like a selector issue to me, more like a draggable issue which seems to have problems with shadow boundaries.

Mit freundlichen Grüßen

Günter Zöchbauer
gue...@gzoechbauer.com
+43 (699) 10 18 87 15

You received this message because you are subscribed to a topic in the Google Groups "Polymer" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/polymer-dev/krEr-Wo1tVA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/900d2105-a8bc-4671-bb8e-4617c135c972%40googlegroups.com.

[Anders Holmgren]

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)

[Rob Dodson]

no I was just showing how to disable user-select based on your initial question

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/3206f01a-4902-4700-8f19-e1c788f05c09%40googlegroups.com.

[Anders Holmgren]

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

[Kevin Schaaf]

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

[Anders Holmgren]

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

[Chuck Horton]

Hello Anders, do you have a working example you can share? Thanks, Chuck

[Anders Holmgren]

Kinda. The code I have is at https://bitbucket.org/andersmholmgren/ah_polymer_stuff/src/8af23142f09a8e8b9f315e1426ef0b0ca504924d/lib/draggable_list_item.html?at=master

But it's in dart so won't do you much good if you're using js.

Also the last release of core-list-dart broke things somewhat and I haven't had a chance to investigate

[AJ Ortega]

The API for core-list changed in 0.4.2.

<core-list
    data="{{campaigns}}"
    height="80">
  <template>
    <paper-item label="{{campaignId}} - {{title}}">
    <a href="#campaign={{campaignId}}"></a>
    </paper-item>
  </template>
</core-list>

becomes

<core-list
    data="{{campaigns}}"
    height="80">
  <template>
    <paper-item label="{{model.campaignId}} - {{model.title}}">
    <a href="#campaign={{model.campaignId}}"></a>
    </paper-item>
  </template>
</core-list>

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/e40fd952-8df5-495c-ab1c-6ca41bcd4e36%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

AJ Ortega | Software Engineer | a...@google.com | 626-872-5064 

[Anders Holmgren]

Yes but I got past that change ok. The dragging works but when I drop then I fire an event and off that update the underlying model. When the view now updates the dropped element is in the wrong spot.

I suspect if I triggered a redraw of the core list it would be correct as I know my model is correctly ordered.

Kevin warned me earlier in this thread that I would likely run into problems at some point as I'm manipulating the Dom. I suspect this is what's happened

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.

[Chuck Horton]

Anders thanks for sharing your code. 

Does anyone have a javascript example?