jquery fullcalendar drop non event on event

Question

我無法在一個事件上拖放一個項目（它不是一個事件，它的員工名稱）。

我想在一個事件上拖動一個員工（見圖片），但'員工'是 沒有事件。我正在使用jQuery UI可拖拽/ droppable。

<script> 
var calendar; 
$(document).ready(function() { 
    calendar = $('#calendar').fullCalendar({ 
    droppable: true, 
    dropAccept: '.employeeItem',  
    drop: function(date, allDay, jsEvent, ui) { 

} 
}); 
}); 

$(function() { 
$(".employeeItem").draggable(); 
$(".fc-event").droppable({ 
    drop: function(event, ui) { 

    } 
}); 
}); 
</script> 

<?php for($i=1;$i<=30;$i++){?> 
    <div>Simpson, Homer<br> 
     10/14 h 
    </div> 
<?php }?> 

<div id='calendar'></div> 

上的事件滴加僱員後，我需要相應 事件數據（事件ID等）到處理保存到分貝。但jquery fullcalendars「drop（callback）」僅提供該項目被放置的日期。

Answer 1

您可以使用eventAfterRender使用數據屬性將自定義ID添加到dom元素。然後在drop（event.target）之後獲取id，更新db中的事件，然後刷新dataSource。

Fiddle

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 
     ... 
     eventAfterRender: function(event, element){ 
      element.data('myId',event.myId); 
      $(element).droppable({ 
       drop: function(event, ui) { 
        var dragged = ui.draggable; 
        var targetId = $(event.target).data('myId'); 
       } 
      }); 
     } 
     ... 
    }); 
}); 

$(document).ready(function() { 
    $(".employeeItem").draggable(); 
});