FullCalendarを使用したドラッグアンドドロップイベント

Question

FullCalendar.jsを使用してドラッグアンドドロップを実装しようとしていますが、基本的に左にドラッグ可能なイベントのリストが表示され、カレンダーにドロップすることができますGoogleCalendarにこれらを追加する関数を実行します）。

私の問題は、いくつかの理由のために働いていない「ドロップ」は、私が上にテキストをドラッグすることができますが、「ドロップ」イベントがFullCalendarに解雇されていないことである。

HTML：

<div class="wrapper wrapper-content" id="calendar-wrap"> 
    <div class="row animated fadeInDown"> 
     <div class="col-lg-3"> 
      <div class="ibox float-e-margins"> 
       <div class="ibox-title"> 
        <h5>Draggable Events</h5> 
        <div class="ibox-tools"> 
         <a class="collapse-link"> 
          <i class="fa fa-chevron-up"></i> 
         </a> 
         <a class="close-link"> 
          <i class="fa fa-times"></i> 
         </a> 
        </div> 
       </div> 
       <div class="ibox-content"> 
        <div id='external-events'> 
         <p>Drag a event and drop into calendar.</p> 
         <div id="evt1" class='external-event navy-bg'>Call Client.</div> 
         <div id="evt2" class='external-event navy-bg'>Confirm Client Happy with Quote.</div> 
         <div id="evt3" class='external-event navy-bg'>Send Quote.</div> 
         <div id="evt4" class='external-event navy-bg'>Something Else.</div> 
         <div id="evt5" class='external-event navy-bg'>One more for luck.</div> 
         <p class="m-t"> 
          <input type='checkbox' id='removeEventAfterDrop' checked /> <label for='removeEventAfterDrop'>remove after drop</label> 
         </p> 
        </div> 
       </div> 
      </div> 

     </div> 
     <div class="col-lg-9"> 
      <div class="ibox float-e-margins"> 
       <div class="ibox-title"> 
        <h5>Calendar Monthly View </h5> 
        <div class="ibox-tools"> 
         <a class="collapse-link"> 
          <i class="fa fa-chevron-up"></i> 
         </a> 
         <a class="close-link"> 
          <i class="fa fa-times"></i> 
         </a> 
        </div> 
       </div> 
       <div class="ibox-content"> 
        <div id="myFullCalendar"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JS：

$(document).ready(function() { 


    /* initialize the external events 
    -----------------------------------------------------------------*/ 

    $('div.external-event').each(function() { 
        console.log("external event"); 
     // 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: 1000, 
      revert: true,  // will cause the event to go back to its 
      revertDuration: 0 // original position after the drag 
     }); 

    }); 


    /* initialize the calendar 
    -----------------------------------------------------------------*/ 
    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#myFullCalendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: true, 
     droppable: true, // this allows things to be dropped onto the calendar 
     drop: function(){ 
      console.log("dropped"); 
     }, 
     events: [ 
      { 
       title: 'All Day Event', 
       start: new Date(y, m, 1) 
      }, 
      { 
       title: 'Long Event', 
       start: new Date(y, m, d-5), 
       end: new Date(y, m, d-2) 
      }, 
      { 
       id: 999, 
       title: 'Repeating Event', 
       start: new Date(y, m, d-3, 16, 0), 
       allDay: false 
      }, 

     ] 
    }); 


}); 

Jsのフィドル： https://jsfiddle.net/filipecss/x74so0tz/7/

この問題の原因は何ですか？事前に

おかげで、

Answer 1

それは私のバイオリンでの問題は、外部CSSファイルの一つであったが判明：

https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.print.css

はどうやらfullcalender.print.cssドラッグ＆ドロップを破ります。