Rubaxa 可与聚合物排序 / 拖放不起作用取决于显示：

Question

我试图让 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: 可以拖动，但是ghost离鼠标很远
display: inline-block: 可以拖动，但是ghost离鼠标很远

关于如何解决这个问题的任何想法？另一个 post 似乎暗示这是一个错误，但那是一年前的事了..?

为了说明，我已将可排序列表代码复制到 jsbin 并扩展它：http://jsbin.com/zemugeyulo/1/edit?html,output

有什么办法可以解决吗？我刚刚开始讨论这些主题，所以我可能错过了一些明显的东西..?

解决方案

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

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

Answer 1

据我了解，您可以通过直接在 custom-element 中指定 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;
  }
}

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

Rubaxa 可与聚合物排序 / 拖放不起作用取决于显示：

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

html

javascript

drag-and-drop

polymer

rubaxa-sortable

解决方案