JQuery drag and drop skins with multiple CSS3 columns

Question

I am trying to drag multiple CSS3 columns. The problem I am facing is that the draggable object follows the columns next to it. If I do not 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 the use of the clone properties and also change the style to the drag 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 CSS, it is important to limit the width for the returned item when dragging:

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

I add some colors, it was more to help me.

Other things are the source code.

Note that I'm thin Nick Berdick already solves it, because I change my second codeframe to floats, and you already use the helper clone and are very good at this code with columns:

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