can't drag a paper-tab - Githubissues

sigmundch commented 9 years ago

This issue was originally reported by a user from Dart.

Here is a small example of a few tabs with a drag event:

<html>
<script src="bower_components/platform/platform.js"></script>
<link rel=import href="bower_components/polymer/polymer.html">
<link rel=import href="bower_components/paper-tabs/paper-tabs.html">
<link rel=import href="bower_components/paper-tabs/paper-tab.html">

<polymer-element name="drag-example">
<template>
  <paper-tabs valueattr="label">
    <template repeat="{{tab in tabs}}">
    <paper-tab draggable="true" label="{{tab.id}}" on-dragstart="{{start}}">{{tab.name}}</paper-tab>
    </template>
  </paper-tabs>
</template>
<script>
Polymer('drag-example', {
  tabs: [ {id: 'a', name: 'a - tab'}, {id: 'b', name: 'b - tab'},
          {id: 'c', name: 'c - tab'}, {id: 'd', name: 'd - tab'},
          {id: 'e', name: 'e - tab'}, {id: 'f', name: 'f - tab'}],
  start: function(e) {
    var target = e.target;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', target.innerHtml);
  }
});
</script>
</polymer-element>
<drag-example></drag-example>

With the default paper-tabs the drag event is not fired. Changing the css in paper-tab.css and removing these 2 lines below makes the drag event fire (but obviously breaks the default ripple effect):

...
.tab-content {
   ...
  /* pointer-events: none; */
}
...
#ink {
  /* position: absolute; */
...

@azakus I'm not sure if this is the intended design or some bad interaction between pointer events and drag-n-drop events?

sigmundch commented 9 years ago

/sub @Smuerdt

anders-sandholm commented 9 years ago

Any updates on this? Working as intended or bug?

dfreedm commented 9 years ago

This is working as intended. Material Design does not have a "reorderable" tab, and the tabs have pointer-events: none in order to make the tap ripple easier to implement. You could use track events or core-drag-drop to facilitate this, but you'd have to make the dragAvatar some other way.

nicmue commented 9 years ago

Can you give an example how to use core-drag-drop with the paper-tabs?

googlearchive / paper-tabs

can't drag a paper-tab #20