Search code examples
javascriptjqueryhtmlcssgridster

gridster drag and drop not working

JSFiddle Example: 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>

I am having a difficult time trying to get the gridster (http://gridster.net) plugin's drag-and-drop feature working in Chrome (Ver 50.0.2661.94). It does work fine in IE11, though. Additionally, if I add

.gridster ul { height: auto !important; }

the drag-and-drop works but formatting becomes wonky as the .gridster ul then has no height. Any help on a resolution for this would be greatly appreciated! Thanks in advance!

Solution

  • Okay, I figured out that the z-index I placed on .gridster was the problem. I took away:

    .gridster { z-index: -100; }

    And added a positive z-index to my #topNav element to keep my sticky menu above the gridster content.