javascript - Rubaxa 可使用 polymer 排序/拖放不起作用，具体取决于显示 :

Question

我试图让 rubaxa 可排序(http://rubaxa.github.io/Sortable/)与 polymer 一起使用。

我从 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: dragging possible, but ghost is far from mouse
• display: inline-block: dragging possible, but ghost is far from mouse

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

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