Question

我在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

如何防止其他卡移动？

干杯

Answer 1

在CSS中，将 float：left 添加到.card-column class

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

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

1 个答案: