Stop sort and change css - jquery-ui

Question

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

Answer 1

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