聚合物 + jquery gridster答案

【问题标题】：polymer + jquery gridster聚合物 + jquery gridster
【发布时间】：2016-02-21 20:49:44
【问题描述】：

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

<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 webcomponent 下面而不是在它上面滑动。我有什么 jquery+polymer gotcha 吗？

【问题讨论】：

标签： jquery polymer polymer-1.0 gridster

【解决方案1】：

Gridster 声明它的行是z-index: 2，因此在标准堆叠平面之上。你可以用

打败它

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

但我不知道他们为什么首先这样做，所以更改 z-index 可能会产生其他一些副作用。

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

【讨论】：

几乎可以工作，但如果我重新排列网格内容并再次滑动，其中一些内容会越过绘图面板。如果我拖动一个内容，它会越过绘图面板（如果它是可见的）。好像他们不知道对方的存在。
我没有完整搜索 gridster 代码。他们设置z-index的地方可能更多。这不是相互了解的问题，z-index是全局设置，必须谨慎使用。