動的に生成した要素にドラッグアンドドロップの機能を付けているが反映されません

イメージ説明

fullcalendar v3.9.0を使用しています。
予定リストにある、My Event1から5はhtmlで事前に作成してあるのですが、ドラッグアンドドロップ、できませんの2つはその下にある追加ボタンで動的に要素を作成したものになります。
予定リスト内の項目は右のカレンダーの日付内にドラッグアンドドロップができるようにしてあります。
しかし、My Eventはドラッグアンドドロップができるのですが、動的に作成した要素はできません。

こちらの中にドラッグアンドドロップのコードも含まれています。

html
<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>




<style>

 html, body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 14px;
}

#external-events {
  position: fixed;
  z-index: 2;
  top: 20px;
  left: 20px;
  width: 150px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
}

#external-events .fc-event {
  margin: 1em 0;
  cursor: move;
}

#calendar-container {
  position: relative;
  z-index: 1;
  margin-left: 200px;
}

#calendar {
  max-width: 900px;
  margin: 20px auto;
}

</style>

        </head>
        <body>




<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>

こちらが動的に要素を作成するコードです。

javascript
//↓リストの追加
function bar() {
    // a 要素の作成と属性の指定
    var newAnchor = document.createElement("a");
    var newTxt = document.createTextNode( document.getElementById("favtext").value );
    newAnchor.appendChild( newTxt );
   
    // 要素の作成
    var newDiv = document.createElement("div");
    newDiv.appendChild ( newAnchor );
	newDiv.className = "fc-event";


   
    // リストに追加
    var list = document.getElementById("external-events");
	let refNode = document.getElementById("favtext");
	list.insertBefore( newDiv, refNode )  
}