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 内容之上。

gridster 拖放不起作用

gridster drag and drop not working

html

javascript

css

jquery

gridster