Javascript Rubaxa可分类聚合物/拖放不工作取决于显示：

我试着让rubaxa sortable（）处理聚合物

我从rubaxa sortable开始，它应该正好做到这一点，并且对标准项很有效（）

但是，只要我使用自定义元素，效果就会变得奇怪

一个旧线程（）提示我检查不同的显示类型

行为如下：

• 显示：块

  ：无法拖动

• display:inline

  ：可以拖动，但ghost离鼠标很远

• 显示：内联块

  ：可以拖动，但ghost离鼠标很远

有没有办法解决这个问题？另一篇帖子似乎暗示这是一个bug，但那是一年前的事了

为了说明这一点，我将可排序列表代码复制到jsbin并对其进行了扩展：

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

解决方案 我的错误是把显示标签放错了地方。我做到了：

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

div{
显示：{{display}}；
背景：灰色；
边框：1px实心#ddd；
边界半径：3px；
填充：6px 12px；
利润底部：3倍；
宽度：80%；
}
{{text}}
聚合物（{}）；

正确的解决方案在哪里

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

：主持人{
显示：{{display}}；
}
div{
背景：灰色；
边框：1px实心#ddd；
边界半径：3px；
填充：6px 12px；
利润底部：3倍；
宽度：80%；
}
{{text}}
聚合物（{}）；

---

@鲁巴萨：谢谢你的支持和伟大的图书馆

据我所知，您可以通过直接在

自定义元素

中指定

显示

来解决此问题

或者类似的东西（虽然不好看）：

---

啊，谢谢你的检查-我同时发现了我的错误，我认为这就是你所描述的，尽管“聚合”解决方案看起来更好，因为你可以使用

：host

标记：：host{display:{{display}；}访问元素

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