解决方案

Question

我试图使用聚合物进行rubaxa sortable（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：拖动可能，但幽灵远离鼠标

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

为了说明我已将可排序列表代码复制到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

据我了解，您可以直接在display指定custom-element来解决此问题。

或类似的东西（虽然它不漂亮）：

// 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可用聚合物分类/拖放不起作用取决于显示：

解决方案

1 个答案: