使用jQuery UI的可丢弃小部件时,drop函数返回一个"UI"对象,您可以在其中访问一个"可拖动"对象,该对象是被拖动对象的DOM元素。但是使用fullCalendar的drop函数,我得到的是"ui"对象,而不是"draggable"对象。这里有一个JSFiddle,您可以在其中测试我所说的内容:http://jsfiddle.net/vfaethbd/
$('#calendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'today prev,next'
},
droppable: true,
drop: function (date, jsEvent, ui) {
alert(JSON.stringify(ui, null, 4));
}
});
$("#droppable-area").droppable({
drop: function (event, ui) {
alert(JSON.stringify(ui, null, 4));
}
});
/* returns "draggable": {
"0": {
"jQuery111104109880250544967": 6
},
"context": {
"jQuery111104109880250544967": 6
},
"length": 1
}
*/
如果你把一个事件放在日历中,你就不会有可拖动的对象,但如果你把它放在另一个可拖动的区域,你就会得到它,因为这个区域使用的是jQuery UI。
感谢
实现外部拖动示例在drop回调中的作用:
drop: function(date) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
此处为完整的代码示例,此处为有关外部事件的文档。
此外,请确保您的活动和日历是可编辑的,对于包括以下内容的活动:
- allDay
- durationEditable
- startEditable
如果没有,您的事件可能会丢失拖动选项