62585


[![画像の説明をここに入力](https://i.stack.imgur.com/qcW1C.png)](https://i.stack.imgur.com/qcW1C.png)  
実現したいこと  
予定リストにある要素を日付へドラッグアンドドロップできるようにしようとしています。  
ドラッグアンドドロップの部分はjQuery、動的要素の作成はjavascriptを使用して作成しています。  
また、図にあるMy Event１から５までの要素はHTMLで事前に作成してあるものです。

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

[code]

    //↓リストの追加
    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 );
    
     // 追加した要素を ドラッグ可能にする
        $(newDiv).draggable({
                 zIndex: 999,
                 revert: true,      // イベントをもとの状態に戻します
                 revertDuration: 0  // ドラッグ後の元の位置
        });
    
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <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, 
        });
    
    
    });
    
     $(".fc-unselectable").droppable({
      tolerance: 'fit',
     });
    
    
    
    </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>
[/code]


CC BY-SA 4.0
2020-01-27T02:27:46.690
62570
2020-01-27T12:20:24.223
2020-01-27T02:37:18.360
37556
37556
question
javascript html jquery jquery-ui
jQueryの処理後に追加したものをドロップしたい


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

ver 3.9 では

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

[code]

          // 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
          });
    
[/code]

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

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

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

[code]

        $(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)
          });
    
    
[/code]

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

[renderEvent](https://fullcalendar.io/docs/v3/renderEvent) の部分のドキュメントみて
あーそういう意味か・・ と分かりました。


CC BY-SA 4.0
2020-01-27T12:20:24.223
62585
2020-01-27T12:20:24.223
18851
62570
answer