JQuery UI draggable: All elements are moved istead of one - only in IE

Question

I have a problem with draggable feature in Internet Explorer.

I have 2 columns, each of them contains a list of cards. I want to drag a card from one column to another. Problem is when I start dragging, cards from other column are moved as well. This happens only in IE.

HTML:

<div class="card-container">
<div class="card-row">
    <div column_id="1" class="card-column drag" style="width: 133px;">
        <ul style="height:100%; width:100%" >
            <li story_id="2" class="card" style="position: relative;">
                <div>Card1</div>
            </li>            
        </ul>
    </div>
    <div column_id="2" class="card-column drag" style="width: 133px;">
        <ul style="height:100%; width:100%" class="snap">
             <li story_id="1" class="card" style="position: relative;">
                <div>Card2</div>
            </li> 
        </ul>
    </div>
</div>
</div>

JS:

$(".drag").find(".card").draggable({ 
        revert: "invalid"
    });
    $(".card-column").droppable({
        accept: ".card",
        drop: function( event, ui ) {
            $(this).find("ul").append("<li class=\'card ui-draggable\' story_id=\'" + ui.draggable.attr("story_id") + "\' style=\'position: relative;\'>" + $(ui.draggable).html() + "</li>");
            ui.draggable.remove();
            $(".drag").find(".card").draggable({ 
                revert: "invalid"
            });
        }
    });

CSS:

    .card-container{
        display: table;
    }
    .card-column{
        display: table-cell;
        min-height: 200px;
        border: 1px solid #B6B6B6;
    }
    .card-row{
        min-height: 200px;
        display: table-row;
    }
    .card-column ul {
        list-style: none outside none;
        margin: 0 0px;
        padding: 0px 0 0;
        position: relative;
    }
    .card-column ul li{
        background: none repeat scroll 0 0 #F6F6F6;
        border: 1px solid #D0D0D0;
        border-radius: 3px;
        margin: 5px;
    }

JSFiddle

Im using jQuery UI 1.8.6

How can I prevent other cards to move?

Cheers

Answer 1

In CSS add float:left to .card-column class

.card-column{
    display: table-cell;
    float:left;/*ADD THIS*/
    min-height: 200px;
    border: 1px solid #B6B6B6;
}