0

我实现了一个可排序的水平列表。我想更新列表中每个元素的 LEFT css 值（所有元素都是 div）。因为剩下的财产对我们来说很重要，我们应该保留它。我找不到怎么做的方法。

目前，由于硬编码的左值，无法对可排序列表进行排序。它总是一样的。当用户开始拖动任何项目时，Left 值应自动更改，因此用户将看到项目正在替换。

这是我的例子：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
div {
    display: block;
}
div.item {
    position: absolute;
    overflow: hidden;
    height: 64px;
    background-color: gray;
    border: 1px solid black;
    float: left;
}
#test {
    position: fixed;
    top: 70px;
    left: 10px;
}
</style>
<script>
    $(function() {  
        $("#sortable").sortable({
            placeholder: "placeholder",
            start : function(event, ui) {
                var wid = parseInt(ui.item.width());
                ui.item.data('orgWid', wid);
            },
            sort : function(event, ui) {
                var wid = ui.item.data('orgWid');
                $('#test').text(wid);
                /**
                 * Here we should update the "left" css value of each element on list.
                 //for siblings of selected div
                $(".placeholder ~ div").each(function() {
                    $(this).css("left", parseInt($(this).css('left')) + wid);
                }
                **/
            },
            cursor : 'crosshair'
        });
        $("#sortable").disableSelection();
    });
</script>
</head>
<body>
    <div>
        <div id="sortable">
            <div id="item_0" class="item" style="left: 0px; width: 176px;">176px</div>
            <div id="item_1" class="item" style="left: 176px; width: 292px;">
                292px</div>
            <div id="item_2" class="item" style="left: 468px; width: 85px;">85px
            </div>
        </div>
    </div>
    <p id="test">-</p>
</body>
</html>
4

0 回答 0