Rubaxa聚合物排序/拖放不工作，具體取決於顯示：

Question

我試圖讓聚合物工作的rubaxa排序（http://rubaxa.github.io/Sortable/）。

我開始與rubaxa可排序，應該做到這些，而且只要我使用自定義元素的影響變得陌生了標準項目（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

據我所知，您可以通過直接在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