1

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

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

为了说明我已将可排序列表代码复制到 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：感谢您的支持和伟大的图书馆！

4

1 回答 1

2

据我了解，您可以通过display直接指定 at来解决此问题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，输出

于 2015-04-18T11:39:45.693 回答