CODEWITHSUNDEEP
jquery-ui
Nrc
Nrc

Reputation: 9787

Stop sort and change css

I have 3 sortable divs. I try to change the height of an item if the user moves it to the right (without sorting). It works well in "sort" this is when the user is moving the item, but when the user leaves the item it comes back to its original height (40px) and I want it to keep the new one (20px). Is it possible to do that?

(Of course I could just put no condition in stop but this is a simplified case and I need a way to detect if in sort the user has moved the item)

$("#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;
}

Upvotes: 0

Views: 62

Answers (1)

Ganesh Gaxy
Ganesh Gaxy

Reputation: 655

At first look at your code you are using move variable but it is declared inside sort: function If you declare move inside sort:, how could you use it in 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'});   
        } 
    }

});

Just declare it like this...

            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' });
                }
            }

        });

Upvotes: 1

Related Questions