Question

我有3个可排序的div。如果用户将其移动到右侧（不进行排序），我会尝试更改项目的高度。它在“排序”中运行良好，这是在用户移动项目时，但是当用户离开项目时，它返回到其原始高度（40px），我希望它保留新的（20px）。有可能吗？

（当然我可以在停止时没有任何条件，但这是一个简化的案例，我需要一种方法来检测用户是否已经移动了项目）

$("#sortable").sortable({
        sort: function (event, ui) { // during sorting
            var move = (ui.position.left - ui.originalPosition.left);
            $('#desti').text(move);

            if ( move > 30 ) {  
                ui.item.css({height:'20px'}); 
            }
        },

        stop: function(event, ui) { 
            if ( move > 30 ) { 
                ui.item.css({height:'20px'});   
            } 
        }

    });

HTML：

<div id="sortable">
    <div>item1</div>
    <div>item1</div>
    <div>item1</div>
</div>

CSS：

#sortable div {
    height:40px;
    margin-bottom:3px;
    background:blue;
}

Answer 1

首先查看您使用move变量的代码，但它在sort:函数内声明如果您在move内声明sort:，您如何在stop:

中使用它

    $("#sortable").sortable({
        sort: function (event, ui) { // during sorting
            var move = (ui.position.left - ui.originalPosition.left);// Look At Here
            $('#desti').text(move);
        if ( move > 30 ) {  
            ui.item.css({height:'20px'}); 
        }
    },

    stop: function(event, ui) { 
        if ( move > 30 ) { 
            ui.item.css({height:'20px'});   
        } 
    }

});

就这样声明......

            var move =0;//Declare it here.. or create another move inside stop:
            $("#sortable").sortable({
                sort: function (event, ui) { // during sorting
                    move= (ui.position.left - ui.originalPosition.left);
                    $('#desti').text(move);
                if (move > 30) {
                    ui.item.css({ height: '20px' });
                }
            },

            stop: function (event, ui) {
                //create a move here...
                if (move > 30) {
                    ui.item.css({ height: '20px' });
                }
            }

        });

停止排序并更改css

1 个答案: