JQuery UI 可拖动：所有元素都被移动而不是一个 - 仅在 IE 中答案

【问题标题】：JQuery UI draggable: All elements are moved istead of one - only in IEJQuery UI 可拖动：所有元素都被移动而不是一个 - 仅在 IE 中
【发布时间】：2014-04-17 16:50:39
【问题描述】：

我在 Internet Explorer 中的可拖动功能有问题。

我有 2 列，每列都包含一个卡片列表。我想将一张卡片从一列拖到另一列。问题是当我开始拖动时，其他列的卡片也会被移动。这只发生在 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

我正在使用 jQuery UI 1.8.6

如何防止其他卡移动？

干杯

【问题讨论】：

标签： jquery-ui internet-explorer draggable jquery-ui-draggable

【解决方案1】：

在 CSS 中添加 float:left 到 .card-column 类

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

【讨论】：