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>

在让员工参加某个活动后，我需要相应的 事件数据（事件 ID 等）将进程保存到数据库。但是 jquery fullcalendars "drop (callback)" 只提供了该项目被丢弃的日期。

Answer 1

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