javascript - jquery fullcalendar 在事件上删除非事件

Question

我无法在事件中拖放项目(它不是事件，它是员工姓名)。

我想在事件中拖动一名员工(见图)，但“员工”是没有事件。我正在使用 jquery UI 可拖动/可放置。

<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>

在某项事件中 dispatch 一名员工后，我需要相应的事件数据(事件 ID 等)将流程保存到数据库。但是 jquery fullcalendars “drop (callback)” 只提供项目被丢弃的日期。

Answer 1

您可以使用 eventAfterRender 将自定义 id 添加到使用数据属性的 dom 元素。然后抓取drop(event.target)后的id，更新db中的event，然后刷新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();
});