jQueryの処理後に追加したものをドラッグしたい

Question

前提・実現したいこと

予定リストにある要素を日付へドラッグアンドドロップできるようにしようとしています。
ドラッグアンドドロップの部分はjQuery、動的要素の作成はjavascriptを使用して作成しています。
また、図にあるMy Event１から５までの要素はHTMLで事前に作成してあるものです。

発生している問題・エラーメッセージ

事前に作成してある要素（My Event1から5）はドラッグアンドドロップができるのですが、動的作成した要素はドラッグアンドドロップできません。
作成された要素がjQueryの処理が終わった後に追加されたもののためドラッグアンドドロップができないのかなという見解なのですが、改善方法がわからず困っています。

該当のソースコード

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

 // ページ読み込み時の処理
$(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, 
    });

});

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

試したこと

ドラッグアンドドロップ部分のコードを
$(document).ready(function () {
の外に出してみたり、リスト作成のjavascript部分に加えたりしてみたのですが、効果ありませんでした。

Answer 1

uiで処理するようにお伝えしたと思うのですが・・・

• CodePen

Comments

[yambejp]

新しい要素を挿入する際に、draggable()を実行するだけです。

Answer 2

イベント初期化処理をfunctionにして、bar追加後にコールしてみてはどうでしょう？

$(document).ready(function () {
　　initEvent();   //<--
   （略）
}

function bar(){
    （略）
     list.insertBefore( newDiv, refNode ) 
     initEvent();  //<--
}

function initEvent(){
    $('#external-events .fc-event').each(function() {
     （略）
    });
}

Answer 3

要素を作成した際にドラッグアンドドロップの要素を付与する

	// 追加した要素を ドラッグ可能にする
    $(newDiv).draggable({
             zIndex: 999,
             revert: true,      // イベントをもとの状態に戻します
             revertDuration: 0  // ドラッグ後の元の位置
    });
	 $(newDiv).data('event', {
        title: $.trim($(newDiv).text()), //イベントのタイトルとして要素のテキストを使用します
		backgroundColor: divcolor.value,//---
		borderColor:divcolor.value,//---
        stick: true //ユーザーがナビゲートするときに維持する（renderEventメソッドのドキュメントを参照）
      });