Rubaxa sortable with polymer / Drag and Drop not working depending on display:

Question

I have tried to get rubaxa sortable (http://rubaxa.github.io/Sortable/ ) working with polymer.

I started with rubaxa-sortable, which should do exactly that, and works well for standard items ( https://github.com/divshot/sortable-list/blob/master/sortable-list.html)

However, as soon as I use custom elements the effects become strange.

An old thread (http://polymer-dev.narkive.com/YWiwS9A9/custom-element-drag-and-drop) has given me the hint to check different display types.

Behavior is as follows:

• display: block: no dragging possible
• display: inline: dragging possible, but ghost is far from mouse
• display: inline-block: dragging possible, but ghost is far from mouse

Any ideas on how to fix that? The other post seems to suggest it is a bug, but that was a year ago..?

To illustrate I have copied the sortable-list code to jsbin and extended it: http://jsbin.com/zemugeyulo/1/edit?html,output

Any ideas if that is fixable? I have just started with those topics, so I might have missed something obvious..?

Solution

My mistake was to put the display tag in the wrong place. I did:

<polymer-element name="custom-element" attributes="text display">
<template>
    <style>
        div {
              display: {{display}};
              background: grey;
              border: 1px solid #ddd;
              border-radius: 3px;
              padding: 6px 12px;
              margin-bottom: 3px;
              width: 80%;
            }
    </style>
    <div>
      <b>{{text}}</b>
    </div>
</template>
<script>
    Polymer({});
</script>

Where the correct solution would be

<polymer-element name="custom-element" attributes="text display">
<template>
    <style>
        :host {
          display: {{display}};
        }
        div {

              background: grey;
              border: 1px solid #ddd;
              border-radius: 3px;
              padding: 6px 12px;
              margin-bottom: 3px;
              width: 80%;
            }
    </style>
    <div>
      <b>{{text}}</b>
    </div>
</template>
<script>
    Polymer({});
</script>

@rubaxa: Thanks for the support and the great library!

Answer 1

As I understand it, you can fix this by specifying display directly at custom-element.

Or something like that (although it is not pretty):

// Bind on `mousedown`
function fixDisplay(evt) {
  var el = evt.target;

  if (el.shadowRoot) {
    var realEl = evt.target.shadowRoot.lastElementChild;
    var style = window.getComputedStyle(realEl);

    el.style.display = style.display;
  }
}

http://jsbin.com/fageve/1/edit?html,output