fullcalendarの日付クリックとドラッグアンドドロップの併用について

fullcalendarのv3.9.0を利用してスケジュールカレンダーを作成したいと考えています。
しかし、日付をクリックするとイベントを追加できるプログラムとドラッグアンドドロップのプログラムを一緒に入れるとうまくいきません。
間違っているところや改善点があればお願いします。

該当のソースコード

html
1
2
3<!DOCTYPE html>
4<html>
5        <head>
6                <meta http-equiv="content-type" content="text/html;charset=UTF-8">
7                <link rel="stylesheet" href="fullcalendar.min.css" media="all"/>
8                <link rel="stylesheet" href="style.css" media="all"/>
9                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
10                <script type="text/javascript" src="moment.min.js"></script>
11                <script type="text/javascript" src="fullcalendar.min.js"></script>
12                <script type="text/javascript" src="ja.js"></script>
13<script src='https://code.jquery.com/ui/1.11.3/jquery-ui.min.js'></script>
14                <script>
15                        // ページ読み込み時の処理
16                        $(document).ready(function () {
17                        
18                                // カレンダーの設定
19                                $('#calendar').fullCalendar({
20                                        height: 550,
21                                        lang: "ja",
22                                        selectable: true,
23                                        selectHelper: true,
24                                        select: function(start, end) {
25                                        var title = prompt("予定タイトル:");
26                                        var eventData;
27                                        if (title) {
28                                                eventData = {
29                                                        title: title,
30                                                        start: start,
31                                                        end: end
32                                                };
33                                                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
34                                        }
35                                        $('#calendar').fullCalendar('unselect');
36                                        },
37                                        editable: true,
38                                        eventLimit: true, 
39                                });
40                        });
41                </script>
42										
43<script>
44
45  $(function() {
46
47  // initialize the external events
48  // -----------------------------------------------------------------
49
50  $('#external-events .fc-event').each(function() {
51
52    // store data so the calendar knows to render an event upon drop
53    $(this).data('event', {
54      title: $.trim($(this).text()), // use the element's text as the event title
55      stick: true // maintain when user navigates (see docs on the renderEvent method)
56    });
57
58    // make the event draggable using jQuery UI
59    $(this).draggable({
60      zIndex: 999,
61      revert: true,      // will cause the event to go back to its
62      revertDuration: 0  //  original position after the drag
63    });
64
65  });
66
67  // initialize the calendar
68  // -----------------------------------------------------------------
69
70  $('#calendar').fullCalendar({
71    header: {
72      left: 'prev,next today',
73      center: 'title',
74      right: 'month,agendaWeek,agendaDay'
75    },
76    editable: true,
77    droppable: true, // this allows things to be dropped onto the calendar
78    drop: function() {
79      // is the "remove after drop" checkbox checked?
80      if ($('#drop-remove').is(':checked')) {
81        // if so, remove the element from the "Draggable Events" list
82        $(this).remove();
83      }
84    }
85  });
86
87});
88
89</script>
90<style>
91
92 html, body {
93  margin: 0;
94  padding: 0;
95  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
96  font-size: 14px;
97}
98
99#external-events {
100  position: fixed;
101  z-index: 2;
102  top: 20px;
103  left: 20px;
104  width: 150px;
105  padding: 0 10px;
106  border: 1px solid #ccc;
107  background: #eee;
108}
109
110#external-events .fc-event {
111  margin: 1em 0;
112  cursor: move;
113}
114
115#calendar-container {
116  position: relative;
117  z-index: 1;
118  margin-left: 200px;
119}
120
121#calendar {
122  max-width: 900px;
123  margin: 20px auto;
124}
125
126</style>
127
128        </head>
129        <body>
130
131
132
133
134<div id='external-events'>
135  <p>
136    <strong>Draggable Events</strong>
137  </p>
138  <div class='fc-event'>My Event 1</div>
139  <div class='fc-event'>My Event 2</div>
140  <div class='fc-event'>My Event 3</div>
141  <div class='fc-event'>My Event 4</div>
142  <div class='fc-event'>My Event 5</div>
143  <p>
144    <input type='checkbox' id='drop-remove' />
145    <label for='drop-remove'>remove after drop</label>
146  </p>
147</div>
148
149<div id='calendar-container'>
150  <div id='calendar'></div>
151</div>
152
153
154        </body>
155</html>

上記のプログラムで日付をクリックした際にイベントを追加することはできるのですが、ドラッグアンドドロップでドラッグはできるんですが、ドロップができません。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

参考サイトのコードをコピペし、順に貼り付けていくだけでは、正しく動きませんよ・・！^^;

併用したいのですから、fullcalendarへの設定は同時に行いましょう。

javascript
1<script>
2 // ページ読み込み時の処理
3$(document).ready(function () {
4	
5	// 外部イベントを初期化します
6	// -----------------------------------------------------------------
7	$('#external-events .fc-event').each(function() {
8		// カレンダーがドロップ時にイベントをレンダリングできるようにデータを保存します
9		$(this).data('event', {
10			title: $.trim($(this).text()), // イベントタイトルとして要素のテキストを使用
11			stick: true //ユーザがナビゲートする時に維持する(renderEventメソッドのドキュメントを参照)
12		});
13
14		// jQuery UIを使用してイベントをドラッグ可能にします
15		$(this).draggable({
16			zIndex: 999,
17			revert: true,	  // イベントをもとの状態に戻します
18			revertDuration: 0  // ドラッグ後の元の位置
19		});
20	});
21	
22	// カレンダーの設定
23	$('#calendar').fullCalendar({
24		header: {
25			left: 'prev,next today',
26			center: 'title',
27			right: 'month,agendaWeek,agendaDay'
28		},
29		height: 550,
30		lang: "ja",
31		selectable: true,
32		selectHelper: true,
33		select: function(start, end) {
34			var title = prompt("予定タイトル:");
35			var eventData;
36			if (title) {
37				eventData = {
38						title: title,
39						start: start,
40						end: end
41				};
42				$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
43			}
44			$('#calendar').fullCalendar('unselect');
45		},
46		droppable: true, // これにより、モノをカレンダーにドロップできます
47		drop: function() {
48			// 「ドロップ後に削除」チェックボックスがオンになっていますか？
49			if ($('#drop-remove').is(':checked')) {
50				// その場合、「ドラッグ可能なイベント」リストから要素を削除します
51				$(this).remove();
52			}
53		},
54		editable: true,
55		eventLimit: true, 
56	});
57
58});
59</script>
60