0

ソート可能な水平リストを実装しました。リスト内の各要素の LEFT css 値を更新したいと思います (すべての要素は div です)。残された財産は私たちにとって非常に重要なので、それを保持する必要があります。私はそれを行う方法を見つけることができませんでした。

現在、左の値がハードコーディングされているため、ソート可能なリストを並べ替えることができません。いつも同じになる。ユーザーがアイテムのドラッグを開始すると、左の値が自動的に変更されるため、ユーザーはアイテムが置き換えられていることがわかります。

これが私の例です：

<!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