jQuery draggable hides with CSS3 multiple column

Question

I'm trying to do a drag and drop across multiple CSS3 columns. The problem I'm having is that the draggable goes behind the columns next to it. If I don't use CSS3 columns, then it works fine.

See this Codepen.

HTML:

<div class='row-fluid recurring-items'>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Baking
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-11">
            <li class='recurring-item'>
  <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
  <span class='handle'>H</span>
  All Purpose Flour
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
            <li class='recurring-item'>
  <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
  <span class='handle'>H</span>
  Sugar
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
            <li class='recurring-item'>
  <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
  <span class='handle'>H</span>
  Brown Sugar
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Bread &amp; baked goods
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-6">
            <li class='recurring-item'>
  <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
  <span class='handle'>H</span>
   Whole Wheat Bread
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Canned goods
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-9">

      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Cereal
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-10">

      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Condiments &amp; sauces
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-14">
            <li class='recurring-item'>
  <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
  <span class='handle'>H</span>
  Dijon Mustard
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Dairy
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-3">
            <li class='recurring-item'>
  <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
  <span class='handle'>H</span>
  Milk
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Deli
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-7">
            <li class='recurring-item'>
  <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
  <span class='handle'>H</span>
  Turkey Slices
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Drinks &amp; snacks
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-12">

      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Dry packaged goods
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-15">

      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Frozen
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-1">

      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Meat/poultry
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-4">

      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Misc
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-8">
            <li class='recurring-item'>
  <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
  <span class='handle'>H</span>
  cream
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Produce
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-2">

      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Seafood
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-5">

      </ul>
    </div>
    <div class='recurring-items-aisle'>
      <h4 class='recurring-items-header'>
        Spices
      </h4>
      <ul class='unstyled recurring-aisle' id="aisle-13">

      </ul>
    </div>
</div>

SCSS:

@import "compass/css3";

@import "compass/css3";


.planning-prefs{
  margin-left: 20px;
}


@media all and (min-width: 300px) {
  .recurring-items{
    @include column-count(2);
    @include column-gap(20px);
  }
}

@media all and (max-width: 975px) and (min-width: 600px) {
  .recurring-items{
    @include column-count(3);
    @include column-gap(20px);
  }
}

@media all and (min-width: 975px) {
  .recurring-items{
    @include column-count(5);
    @include column-gap(20px);
  }
}

.recurring-items-header{
  font-weight: bold;
  text-decoration: underline;
}

.recurring-items-aisle{
  display: inline-block;
  width: 100%;
}

.recurring-item{
  width: 95%;
  .handle{
    cursor: pointer;
  }
}

CoffeeScript:

jQuery ->
  $('li.recurring-item').draggable
    handle: '.handle'
    revert: true
    appendTo: 'body'
  $('ul.recurring-aisle').droppable
    drop: ->
      alert('dropped')

Any help would be greatly appreciated.

Answer 1

I fix using the clone properties, as well I change the style to the dragging element.

http://codepen.io/luarmr/pen/KpvpOb

jQuery ->
  $('li.recurring-item').draggable
    handle: '.handle'
    revert: true
    helper: 'clone'
    appendTo: 'body'
  $('ul.recurring-aisle').droppable
    hoverClass: "dropphover"
    drop: ->
      alert(this.innerHTML)

And in the CSS is important the limitation in the width for recurring-item when is dragging:

.recurring-item.ui-draggable-dragging{
  width:200px;
}

I add a few color, that was more to help me.

The other things are the original codepen.

Note I thin Nick Burdick already solve it, because I change your second codepen with the floats, and you already use helper clone and works fine this code with columns:

http://codepen.io/luarmr/pen/zGdvvx