JQuery UI 每个面板的可排序占位符 bootstrap

Question

我在 JQuery Ui 中的可排序选项有问题。例如，我有多个 div 或 panel (bootstrap)，每个 div 有 custom height and width。现在我想在每个高度和宽度上都有占位符。

$(function () {
    $(".grid").sortable({
        tolerance: 'pointer',
        revert: 'invalid',
        placeholder: 'span2 well placeholder tile',
        forceHelperSize: true
    });
});

.placeholder {
    border: 1px solid green;
    background-color: white;
    -webkit-box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;
}
.tile {
    height: 100px;
}
.grid {
    margin-top: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<div class="row grid span8">
    <div class="well span2 tile">A</div>
    <div class="well span2 tile" style="height:500px;">B</div>
    <div class="well span2 tile" style="width:100px;">C</div>
    <div class="well span4 tile">D</div>
</div>

http://jsfiddle.net/myimedia/Sm4EK/

Answer 1

您只需在可排序和更新维度中添加 start event：

$(function () {
    $(".grid").sortable({
        tolerance: 'pointer',
        revert: 'invalid',
        placeholder: 'well placeholder tile',
        forceHelperSize: true,
        start: function( event, ui ) {
            ui.placeholder.height(ui.item.height())
            ui.placeholder.width(ui.item.width())
        }
    });
});

jsFiddle

JQuery UI 每个面板的可排序占位符 bootstrap

JQuery UI sortable placeholder per panel bootstrap

javascript

jquery-ui

placeholder