実現したいこと
予定リストにある要素を日付へドラッグアンドドロップできるようにしようとしています。
ドラッグアンドドロップの部分はjQuery、動的要素の作成はjavascriptを使用して作成しています。
また、図にあるMy Event1から5までの要素はHTMLで事前に作成してあるものです。
困っていること
事前に作成してある要素(My Event1から5)はドラッグアンドドロップができるのですが、動的作成した要素はドラッグアンドドロップできません。
作成された要素がjQueryの処理が終わった後に追加されたもののためドラッグアンドドロップができないのかなという見解なのですが、改善方法がわからず困っています。
//↓リストの追加
function bar() {
// 要素の作成と属性の指定
var newDiv = document.createElement("div");
var newTxt = document.createTextNode( document.getElementById("favtext").value );
newDiv.appendChild( newTxt );
newDiv.className = "fc-event";
// リストに追加
var list = document.getElementById("external-events");
let refNode = document.getElementById("favtext");
list.insertBefore( newDiv, refNode );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// ページ読み込み時の処理
$(document).ready(function () {
// 外部イベントを初期化します
// -----------------------------------------------------------------
$('#external-events .fc-event').each(function() {
// カレンダーがドロップ時にイベントをレンダリングできるようにデータを保存します
$(this).data('event', {
title: $.trim($(this).text()), // イベントタイトルとして要素のテキストを使用
stick: true //ユーザがナビゲートする時に維持する(renderEventメソッドのドキュメントを参照)
});
// jQuery UIを使用してイベントをドラッグ可能にします
$(this).draggable({
zIndex: 999,
revert: true, // イベントをもとの状態に戻します
revertDuration: 0 // ドラッグ後の元の位置
});
});
// カレンダーの設定
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: 550,
firstDay: 1,
lang: "ja",
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt("予定タイトル:");
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
droppable: true, // これにより、モノをカレンダーにドロップできます
editable: true,
eventLimit: true,
});
});
</script>
<div id='external-events'>
<p>
<strong>予定リスト</strong>
</p>
<div class='fc-event'>My Event 1</div>
<div class='fc-event'>My Event 2</div>
<div class='fc-event'>My Event 3</div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
<input type="text" id="favtext" style="display:none;">
<input type="button" id="addurl" value="追加" onclick="bar();" style="display:none;">
<label>
<img src="プラスオレンジ.png">
<input type="checkbox" style="display: none;" onchange="clickBtn1(this.checked)">
</label>
</div>