javascript - gridster 拖放不起作用

Question

JSFiddle 示例:https://jsfiddle.net/27t0jymr/

<section id="mainContainer">
  <!-- Dashboard Section -->
  <div class="dashboard">
    <div class="gridster">
      <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
          <h1>PROJECT LOAD PER PERSON</h1>
        </li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
          <h1>RTN LOAD PER PERSON</h1>
        </li>
        <li data-row="1" data-col="3" data-sizex="2" data-sizey="2">
          <h1>TICKET LOAD PER PERSON</h1>
        </li>

        <li data-row="2" data-col="1" data-sizex="2" data-sizey="2">
          <h1>RTN LIFESPAN PER PERSON</h1>
        </li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2">
          <h1>TICKET LIFESPAN PER PERSON</h1>
        </li>
        <li data-row="2" data-col="3" data-sizex="2" data-sizey="2">
          <h1>UNTOUCHED FOR 7 DAYS</h1>
        </li>
      </ul>
    </div>
  </div>
  <!-- Projects Section -->
  <div class="projects">
    <span>PROJECT STUFF</span>
  </div>
  <!-- RTNs Section -->
  <div class="rtns">
    <span>RTN STUFF</span>
  </div>
  <!-- Tickets Section -->
  <div class="tickets">
    <span>TICKET STUFF</span>
  </div>
</section>

我在尝试让 gridster ( http://gridster.net) 插件的拖放功能在 Chrome(版本 50.0.2661.94)中工作时遇到了困难。不过，它在 IE11 中运行良好。另外，如果我添加

.gridster ul { height: auto !important; }

拖放有效，但格式变得不稳定，因为 .gridster ul 然后没有高度。对此解决方案的任何帮助将不胜感激!提前致谢!

Answer 1

好的，我发现我放在 .gridster 上的 z-index 是问题所在。我拿走了:

.gridster { z-index: -100; }

并为我的 #topNav 元素添加了一个正的 z-index 以保持我的粘性菜单在 gridster 内容之上。