jQuery Draggable - ドラッグ中にdivのサイズを変更できませんか？

Question

私はthisコードがあります。

HTMLを

<div class="draggable_container"> 
    <div id="draggable_1" class="draggable"> 
     <div class="exp"><!-- --></div> 
    </div> 
</div> 

CSS

.draggable_container 
{ 
    height:300px; 
    background-color:red; 
    width:140px; 
} 

.draggable 
{ 
    height:132px; 
    width:130px; 
    cursor:pointer; 
    border:5px solid #000000; 
    background-color:#ffffff; 
} 

jQueryの

$(".draggable").draggable({ 
    axis: "y", 
    containment: 'parent', 
    drag: function(event, ui) { 
     draggedElement = $(ui.helper.context); 
     distanzaTop = draggedElement.css('top').substring(0, (draggedElement.css('top').length - 2)); 

     if (distanzaTop < 20) { 
      draggedElement.css('height', '132px'); 

     } else if (distanzaTop >= 20 && distanzaTop < 80) { 
      draggedElement.css('height', '120px'); 

     } else if (distanzaTop >= 80 && distanzaTop < 140) { 
      draggedElement.css('height', '86px'); 

     } else if (distanzaTop >= 140 && distanzaTop < 200) { 
      draggedElement.css('height', '68px'); 

     } else if (distanzaTop >= 200) { 
      draggedElement.css('height', '60px'); 
     } 
    }  
}); 

だから、私は/ダウンして上にスクロールドラッグ可能なdiv要素をresingされて行わマウス。問題は（あなたが見るように）私は単一の動きで底に行くことができないということです。ディビジョンは途中でブロックされています...私はそれを再選択し、再び下に移動する必要があります。

好奇心：下から上までは完璧に動作します。上から下にブロックされます。

なぜですか？そして、どうすればこの問題を解決できますか？

Answer 1

あなたは小さい方の最大値（200）で始まる条件を逆にする必要があります

if (distanzaTop < 20) { 
    draggedElement.css('height', '132px'); 
} else if (distanzaTop >= 200) { 
    draggedElement.css('height', '60px'); 
} else if (distanzaTop >= 140 && distanzaTop < 200) { 
draggedElement.css('height', '68px'); 
} else if (distanzaTop >= 80 && distanzaTop < 140) { 
draggedElement.css('height', '86px'); 
} else if (distanzaTop >= 20 && distanzaTop < 80) { 
    draggedElement.css('height', '120px'); 
}