Fullcalendar：即使 fullcalendar 接受 drop，可拖动对象也将 fullcalendar 拒绝为 droppable
Posted
技术标签:
【中文标题】Fullcalendar：即使 fullcalendar 接受 drop，可拖动对象也将 fullcalendar 拒绝为 droppable【英文标题】：Fullcalendar: draggable object rejects fullcalendar as droppable even though fullcalendar accepts drop 【发布时间】：2012-03-31 00:31:40 【问题描述】：我已将 FullCalendar 设置为接受丢弃，它确实如此。但是，我用 revert:'invalid' 构造的可拖动对象似乎无法将 FullCalendar 上的日期识别为可放置的，并返回。这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>mydrag</title>
<script src="fullcalendar-bundle.js" type="text/javascript"></script>
</head><body>
<div id="mydrag" style="width: 200px; height: 100px; background-color: red;">My Drag</div>
<div id="calendar"></div>
<script type="text/javascript">
function onExternalEventDrop(date, allDay)
alert("Dropped on " + date + " with allDay=" + allDay);
$('#mydrag').each(function()
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject =
title: 'MyDrag Title'
;
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable(
helper: 'clone',
//revert: 'invalid',
revert: function(droppableObj)
//if false then no socket object drop occurred.
if(droppableObj === false)
//revert the .myselector object by returning true
alert('Not a droppable object');
return true;
else
//droppableObj was returned,
//we can perform additional checks here if we like
//alert(droppableObj.attr('id')); would work fine
//return false so that the .myselector object does not revert
return false;
,
revertDuration: 500, // original position after the drag
start: function(e, ui)
$(ui.helper).css('width', $(this).css('width'));
);
);
$('#calendar').fullCalendar(
aspectRatio: 2.25,
header:
left: '',
center: 'title',
right: 'prev,next'
,
columnFormat:
month: 'dddd'
,
droppable: true,
drop: onExternalEventDrop
);
</script>
</body></html>
当我将可拖动元素拖到日历上时，该元素会恢复（表明日历日期未被识别为有效的可放置对象）....但是放置回调 是 触发的预期警报（表明 FullCalendar 将可拖动对象识别为有效）。我希望可拖动的不应该恢复。我是在做错事还是期待错事？我已经搜索了所有内容，但没有找到任何可以解释这一点的东西。任何帮助将不胜感激。
更新：忘了说，我所说的“fullcalendar-bundle.js”是一个包含以下内容的文件：
jquery 1.5.2 jquery ui 1.8.11 fullcalendar 1.5.2 插件另一个更新：我刚刚尝试了 FullCalendar 1.5.3 版本，但看到了相同的行为。
【问题讨论】：
你解决过这个问题吗？ 【参考方案1】：这可能会对您有所帮助：
拖放的工作版本：http://jsfiddle.net/wkKfB/15/
dragobj = false 的解决方案是，您需要将 droppable 事件绑定到日历，以便 draggable 知道什么 DOM 对象是 droppable 参见这里的工作示例：http://jsfiddle.net/CZQkm/3/ && http://jsfiddle.net/DEsdN/12/ *到此为止
（您的版本，但有一些调整。顺便说一句，我在这里对您的问题进行了 jsfiddl 编辑：http://jsfiddle.net/wkKfB/16/）（问题是绑定外部事件）
好的文档存放在这里：http://arshaw.com/fullcalendar/docs/dropping/droppable/
问题是您需要在外部添加这些拖动事件。
您可以更改 css 并使其适合您的使用。
引用 *[来自上面关于外部拖放的文档。]* http://arshaw.com/fullcalendar/docs/dropping/droppable/
> How can I use this to add events???
>
> Good question. It is a common need to have an "external list of events" that can be dragged onto the calendar.
>
> While the droppable option deals with generic jQuery UI draggables and is not specifically tailored to adding events, it is possible to
> achieve this with a few lines of code. Follow the
> external-dragging.html example in FullCalendar's download. You can
> also view the example online.
>
> In short, you must call renderEvent yourself in the drop callback.
另一个链接：http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html
要捕获外部事件，您需要添加此代码，但上面的示例已经为您设置好了，应该很清楚
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function()
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject =
title: $.trim($(this).text()) // use the element's text as the event title
;
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable(
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
);
);
/* initialize the calendar
-----------------------------------------------------------------*/
【讨论】：
以上是关于Fullcalendar：即使 fullcalendar 接受 drop，可拖动对象也将 fullcalendar 拒绝为 droppable的主要内容，如果未能解决你的问题，请参考以下文章
使用 ng-fullcalendar dayClick 时的数据绑定
Fullcalendar：即使 fullcalendar 接受 drop，可拖动对象也将 fullcalendar 拒绝为 droppable
FullCalendar：如何重新创建/重新初始化 FullCalendar 或批量添加多个事件