[備忘録]draggableで移動した要素を固定する

問題だったこと、やりたいこと

付箋アプリを作成したときに、付箋をdraggableで実装した。

複数枚付箋を作成したときに、一番上の要素を削除したとき、
任意の位置に移動させた付箋が、削除した要素分上に移動してしまった。

移動した付箋は、移動先の場所で固定させたかった。

修正したこと、ソース

移動を終了したときに、positionをabsoluteに変更して、topとleftを計算しなおした。
(最初からabsoluteを指定すると、ADDボタンを押したときに、付箋が重なって作成されたのでボツ)

HTML

<div class="container sticky-container">                   
	<div class="row">                                      
		<input type="button" id="add-sticky-button"        
			class="btn btn-s btn-default" value="ADD">     
	</div>                                                 
	<div class="row">                                      
		<div id='sticky-container' class="col-sm-3 col-lg-2
			<div id="init-sticky-container"></div>         
		</div>                                             
	</div>                                                 
</div>                                                     

CSS

# sticky-container {
	border-style: solid;
	min-height: 150px;
	max-height: 100%;
	position: relative;
}

JS　stopイベントでpositionをabsoluteに変えて、
topとleftを再計算する（何かほかに良い方法がありそうな気がする。。）

　draggableの部分だけ抜出し

$sticky.draggable({
	stop: function( event, ui ) {
		$(this).css('position', 'absolute');
		$(this).css('top', ui.offset.top - $('#sticky-container').offset().top);
		$(this).css('left', ui.offset.left - $('#sticky-container').offset().left);
	}
});

結果

移動後の付箋は、場所固定になる
（移動前の付箋は、自動で詰まる）

前提

そもそもは↓の記事を参考に作成させていただきました。
https://qiita.com/iotas/items/fbf4994877e5c2053787
http://scrumblr.ca/demo