使用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打破拖放。