ドラッグ&ドロップのcloneがうまくいきません

#　前提・実現したいこと
ドラッグ＆ドロップした際に、元の要素がくっついてきてしまって困っています。

Googleカレンダーの様な動きをするカレンダーwebアプリを開発しています。
ドラッグしたら、元の要素をクローンしたまま「移動」、「コピー」「キャンセル」のボタンを表示させてから、アクションを完了させようとしています。

現状のソースでは、移動した先におかしな位置でクローンされた状態でついてきてしまっています。

html
1<div class="inner cal_tr">
2    <div class="cal cal_td">
3        <div class="cal_date day_1 1">1</div>
4        <div class="cal_plan"></div>
5        <div class="cal_body"></div>
6    </div>
7    <div class="cal cal_td">
8        <div class="cal_date day_2 2">2</div>
9        <div class="cal_plan"></div>
10        <div class="cal_body"></div>
11    </div>
12    <div class="cal cal_td">
13        <div class="cal_date day_3 3">3</div>
14        <div class="cal_plan"></div>
15        <div class="cal_body"></div>
16    </div>
17    <div class="cal cal_td">
18        <div class="cal_date day_4 4">4</div>
19        <div class="cal_plan"></div>
20        <div class="cal_body">
21                <div class="area_btn" draggable="true">有休/山田太郎</div>
22                <div class="area_btn" draggable="true">有休/山田花子</div>
23        </div>
24    </div>
25    <div class="cal cal_td">
26        <div class="cal_date day_5 5">5</div>
27        <div class="cal_plan"></div>
28        <div class="cal_body">
29            <div class="bar_area">
30                <div class="area_btn" draggable="true" data-day="5">有休/山本　次郎</div>
31            </div>
32        </div>
33    </div>
34    <div class="cal cal_td">
35        <div class="cal_date day_6 6">6</div>
36        <div class="cal_plan"></div>
37        <div class="cal_body"></div>
38    </div>
39    <div class="cal cal_td">
40        <div class="cal_date day_7 7">7</div>
41        <div class="cal_plan"></div>
42        <div class="cal_body"></div>
43    </div>
44</div>
45<div id="cal_modal">
46    <div class="btn_area">
47        <div class="close_btn">閉じる</div>
48    </div>
49    <div class="modal_body">
50        <div class="staff_name"><ruby><rt></rt></ruby></div>
51        <div class="sch_date_area">
52        <div class="sch_tittle">
53            <div class="tittle">日時</div>
54            <div class="sch_content sch_date"></div>
55        </div>
56        <div class="sch_tittle">
57            <div class="tittle">休暇種類</div>
58            <div class="sch_content sch_type"></div>
59        </div>
60        <div class="memo_area">
61            <div class="tittle">メモ</div>
62            <textarea name="" class="memo_text" cols="45" rows="10"></textarea>
63        </div>
64        </div>
65        <div class="submit">登録する</div>
66    </div>
67</div>      
68

jQuery
1$(function(){
2    $('#cal_modal').hide();
3    $('.area_btn').draggable({
4        revert:'invalid',
5        opacity: '0.8',
6        helper: 'clone',
7        snap: true,
8        containment: '.inner',
9        zIndex:'100000',
10        start: function(e,ui){
11            // ui.helper.css('display', 'block');
12            $(this).append(ui.helper.clone());
13            $('.action_area').remove();
14        }
15    });
16
17    $('.cal_body').droppable({
18        accept: '.area_btn',
19        tolerance: 'pointer',
20        hoverClass: "areahover",
21        drop: function(e, ui){
22            ui.draggable.appendTo(this).css({top:'0',left:'0'});
23            ui.draggable.after('<div class="action_area"><div class="move">移動</div><div class="copy">コピー</div><div class="cancel">キャンセル</div></div>');
24            $('.move,.copy').click(function(){
25                $('#cal_modal').show();
26            });
27            $('.close_btn').click(function(){
28                $('#cal_modal').hide();
29            });
30        }
31    });
32});