聚合物 + jquery 网格星

Question

我正在尝试用 jquery gridster 创建一个聚合物组件。这是组件的基本 shell。

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="grid-layout">
<style>
   ul {
    list-style-type: none;
   }
   li {
    background-color: #FF0000
   }
</style>
  <template>
    <div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li> 
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li> 
    </ul>
   </div>
  </template>
  <script>
  Polymer({
    is: 'grid-layout', 
    attached: function() {
    this.async(function() {

      $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [150, 150]
      });

    });
   }
  });
  </script>
</dom-module>

我正在尝试将其用作

<body class="fullbleed layout vertical">
  <paper-drawer-panel force-narrow> 
      <div drawer>
        <paper-menu>
                <paper-item>Item 1</paper-item>
                <paper-item>Item 2</paper-item>
            </paper-menu>
      </div>    
      <div main>
        <paper-toolbar>
          <iron-icon icon="menu" paper-drawer-toggle></iron-icon>           
        </paper-toolbar>
        <grid-layout></grid-layout>
      </div>
  </paper-drawer-panel>    
</body>

我遇到的问题是抽屉面板在 jquery 网络组件下方滑动，而不是在其上方滑动。我有任何 jquery+聚合物问题吗？

Answer 1

Gridster 声明其行数为 z-index: 2，因此高于标准堆叠平面。你可以用

打败它

.gridster .gs-w {
  z-index: 0;
}

但我不知道他们为什么一开始就这样做，所以更改 z-index 可能会有一些其他副作用。

http://jsbin.com/kiziho/edit?html,output

聚合物 + jquery 网格星

polymer + jquery gridster

jquery

polymer

polymer-1.0

gridster