我试着让rubaxa可排序(http://rubaxa.github.io/Sortable/）与聚合物一起工作。

我从rubaxa sortable开始，它应该可以做到这一点，并且对标准项（https://github.com/divshot/sortable-list/blob/master/sortable-list.html)

然而，一旦我使用自定义元素，效果就会变得奇怪。

一根旧线(http://polymer-dev.narkive.com/YWiwS9A9/custom-element-drag-and-drop)给了我检查不同显示类型的提示。

行为如下：

• display: block：无法拖动
• display: inline：可以拖动，但重影离鼠标很远
• display: inline-block：可以拖动，但重影离鼠标很远

有什么解决办法吗？另一篇帖子似乎暗示这是一个bug，但那是一年前的事了。。？

为了说明，我将可排序列表代码复制到了jsbin中并对其进行了扩展：http://jsbin.com/zemugeyulo/1/edit?html，输出

如果这是可以解决的，有什么想法吗？我刚开始谈论这些话题，所以我可能错过了一些显而易见的东西。。？

解决方案

我的错误是把展示标签放错了地方。我做到了：

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

正确的解决方案是

<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：谢谢你的支持和伟大的图书馆！

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