拖动时jQueryUI可排序项不正确的位置

时间:2014-04-16 10:51:19

标签: javascript jquery jquery-ui twitter-bootstrap

我有一个jQueryUI可排序列表,其中包含三个bootstrap面板,面板1和2以正确的初始位置开始拖动,但是每当您尝试拖动面板3时,它都会从面板1偏移到光标下方。 Live demo

HTML

<ul id="sortable">
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">1</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">2</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">3</div>
            <div class="panel-body"></div>
        </div>
    </li>
</ul>

的JavaScript

$('#sortable').sortable({
    tolerance: 'pointer',
    handle: '.panel-heading',
    placeholder: 'col-xs-4 panel-al-placeholder',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});

CSS

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    border:2px solid #f8e287;
    background:#fef9e7
}

2 个答案:

答案 0 :(得分:22)

我遇到了类似的问题,将帮助程序设置为克隆模式对我有用:

$('#sortable').sortable({
    helper: 'clone'
});

答案 1 :(得分:0)

我遇到了同样的问题。我在过去发现bootstrap设置全局的CSS样式box-sizing: border-box;可能会导致一些javascript库出现问题,据我所知,在这种情况下结果是问题。我想出了一个快速修复程序,它将框大小设置回到列的CSS2默认box-sizing: content-box;

不幸的是,这会对bootstrap中的列布局造成严重破坏,因为列的填充现在已添加到百分比宽度上,因此我们的3列最终会超过100%。对于我的代码,我实际上并不需要在列之间添加任何填充,所以我只是在列上设置负边距以抵消额外的宽度。

有关box-sizing CSS属性的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Live demo

HTML

<ul id="sortable">
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">1</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">2</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">3</div>
            <div class="panel-body"></div>
        </div>
    </li>
</ul>

的Javascript

$('#sortable').sortable({
    tolerance: 'pointer',
    handle: '.panel-heading',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});

CSS

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.col-xs-4 {
    box-sizing: content-box;
    margin: 10px -16px;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    background:#fef9e7
}