jQueryの処理後に追加したものをドロップしたい

投稿者: Anonymous

画像の説明をここに入力
実現したいこと
予定リストにある要素を日付へドラッグアンドドロップできるようにしようとしています。
ドラッグアンドドロップの部分はjQuery、動的要素の作成はjavascriptを使用して作成しています。
また、図にあるMy Event1から5までの要素はHTMLで事前に作成してあるものです。

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

_x000D_

_x000D_

//↓リストの追加_x000D_
function bar() {_x000D_
    // 要素の作成と属性の指定_x000D_
    var newDiv = document.createElement("div");_x000D_
    var newTxt = document.createTextNode( document.getElementById("favtext").value );_x000D_
    newDiv.appendChild( newTxt );_x000D_
	newDiv.className = "fc-event";_x000D_
   _x000D_
_x000D_
    // リストに追加_x000D_
    var list = document.getElementById("external-events");_x000D_
	let refNode = document.getElementById("favtext");_x000D_
	list.insertBefore( newDiv, refNode );_x000D_
_x000D_
	// 追加した要素を ドラッグ可能にする_x000D_
    $(newDiv).draggable({_x000D_
             zIndex: 999,_x000D_
             revert: true,      // イベントをもとの状態に戻します_x000D_
             revertDuration: 0  // ドラッグ後の元の位置_x000D_
    });_x000D_
_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<script>_x000D_
_x000D_
_x000D_
 // ページ読み込み時の処理_x000D_
$(document).ready(function () {_x000D_
_x000D_
    // 外部イベントを初期化します_x000D_
    // -----------------------------------------------------------------_x000D_
    $('#external-events .fc-event').each(function() {_x000D_
        // カレンダーがドロップ時にイベントをレンダリングできるようにデータを保存します_x000D_
        $(this).data('event', {_x000D_
            title: $.trim($(this).text()), // イベントタイトルとして要素のテキストを使用_x000D_
            stick: true //ユーザがナビゲートする時に維持する(renderEventメソッドのドキュメントを参照)_x000D_
        });_x000D_
_x000D_
        // jQuery UIを使用してイベントをドラッグ可能にします_x000D_
        $(this).draggable({_x000D_
            zIndex: 999,_x000D_
            revert: true,      // イベントをもとの状態に戻します_x000D_
            revertDuration: 0  // ドラッグ後の元の位置_x000D_
        });_x000D_
    });_x000D_
_x000D_
_x000D_
    // カレンダーの設定_x000D_
    $('#calendar').fullCalendar({_x000D_
        header: {_x000D_
            left: 'prev,next today',_x000D_
            center: 'title',_x000D_
            right: 'month,agendaWeek,agendaDay'_x000D_
        },_x000D_
        height: 550,_x000D_
			firstDay: 1,_x000D_
        lang: "ja",_x000D_
        selectable: true,_x000D_
        selectHelper: true,_x000D_
        select: function(start, end) {_x000D_
            var title = prompt("予定タイトル:");_x000D_
            var eventData;_x000D_
            if (title) {_x000D_
                eventData = {_x000D_
                        title: title,_x000D_
                        start: start,_x000D_
                        end: end_x000D_
                };_x000D_
                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true_x000D_
            }_x000D_
            $('#calendar').fullCalendar('unselect');_x000D_
        },_x000D_
        droppable: true, // これにより、モノをカレンダーにドロップできます_x000D_
        editable: true,_x000D_
        eventLimit: true, _x000D_
    });_x000D_
_x000D_
_x000D_
});_x000D_
_x000D_
	$(".fc-unselectable").droppable({_x000D_
		tolerance: 'fit',_x000D_
	});_x000D_
_x000D_
_x000D_
_x000D_
</script>_x000D_
_x000D_
<div id='external-events'>_x000D_
  <p>_x000D_
    <strong>予定リスト</strong>_x000D_
  </p>_x000D_
  <div class='fc-event'>My Event 1</div>_x000D_
  <div class='fc-event'>My Event 2</div>_x000D_
  <div class='fc-event'>My Event 3</div>_x000D_
  <div class='fc-event'>My Event 4</div>_x000D_
  <div class='fc-event'>My Event 5</div>_x000D_
	<input type="text" id="favtext" style="display:none;">_x000D_
	<input type="button" id="addurl" value="追加" onclick="bar();" style="display:none;">_x000D_
	<label>_x000D_
		<img src="プラスオレンジ.png">_x000D_
		<input type="checkbox" style="display: none;" onchange="clickBtn1(this.checked)">_x000D_
	</label>_x000D_
</div>

_x000D_

_x000D_

_x000D_

解決

ver 3.9 と ver 4.0 では 動作がかなり違っていました。

ver 3.9 では

サンプルの中で “My Event 1” という 外部のイベントのバー には 下記2つの 設定がされています。

      // store data so the calendar knows to render an event upon drop
      $(this).data('event', {
        title: $.trim($(this).text()), // use the element's text as the event title
        stick: true // maintain when user navigates (see docs on the renderEvent method)
      });

      // make the event draggable using jQuery UI
      $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
      });

下の方は ドラッグ&ドロップを可能にする設定で 上の方は ドロップした時に Grid の中に
イベントの文字列の書かれた スティックを追加する処理のようです。

見た目は ドラッグ&ドロップしているように見えますが、実は ドロップした瞬間に そのDIV は消えて
別の div が カレンダーの中に 書き込まれているようです。

なので ドロップした後で、カレンダーの中に文字を表示するためには 下記のコードを追加してください。

    $(newDiv).data('event', {
        title: $.trim($(newDiv).text()), // use the element's text as the event title
        stick: true // maintain when user navigates (see docs on the renderEvent method)
      });

ドキュメントには あまりちゃんと書いてなかったな・・。
ver 4.0 では ちゃんとドロップできたので 気づきませんでした・・。

renderEvent の部分のドキュメントみて あーそういう意味か・・ と分かりました。

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *