Fullcalendar：即使fullcalendar接受drop，可拖动对象也会拒绝fullcalendar [英] Fullcalendar: draggable object rejects fullcalendar as droppable even though fullcalendar accepts drop
问题描述
我已经将FullCalendar设置为接受丢弃，它会这样做。但是，我用恢复构建的可拖动对象：'无效'似乎无法将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-1http-equiv =content-type>
< title> mydrag< / title>
< script src =fullcalendar-bundle.jstype =text / javascript>< / script>
< / head>< body>
< div id =mydragstyle =width：200px; height：100px; background-color：red;>我的拖动< / div>
< div id =calendar>< / div>
< script type =text / javascript>
函数onExternalEventDrop（date，allDay）{
alert（Dropped on + date +with allDay =+ allDay）;
$ b $（'＃mydrag'）。each（function（）{
//创建一个事件对象（http://arshaw.com/ fullcalendar / docs / event_data / Event_Object /）
//它不需要开始或结束
var eventObject = {
title：'MyDrag Title'
};
//将事件对象存储在DOM元素中，这样我们就可以在以后获得
$（this）.data（'eventObject'，eventObject）;
//使用jQuery UI使事件可拖动
$（this）.draggable（{
helper：'clone'，
//复原：'invalid'，
复原：函数（droppableObj）{
//如果为false，则不发生套接字对象丢失
if（droppableObj === false）{
//通过返回true来返回.myselector对象
alert（'不是可放下的对象'）;
返回true;
}
else {
// droppableObj was return ed，
//如果我们喜欢
//alert (droppableObj.attr（'id'）），我们可以在这里执行额外的检查。会正常工作
//返回false，以便.myselector对象不返回
return false;
}
}，
revertDuration：500，//拖动后的原始位置
start：function（e，ui）{
$（ui.helper）。 css（'width'，$（this）.css（'width'））;
}
}）;
}）;
$ b $（'＃calendar'）。fullCalendar（{
aspectRatio：2.25，
header：{
left：''，
center：' title'，
右：'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版本，但看到相同的行为。 >
这可能对您有所帮助：
放弃： http://jsfiddle.net/wkKfB/15/
dragobj = false的解决方案是，您需要将droppable事件绑定到日历，以便 draggable 知道哪个DOM对象 droppable 在此处查看工作示例： http://jsfiddle.net/CZQkm/3/ http://jsfiddle.net/DEsdN/12/ （您的版本，但有一些调整。顺便说一句，我有jsfiddl-ed在这里你的问题： http://jsfiddle.net/wkKfB/16/ ）（问题是绑定外部事件） 好文档驻留在这里： http://arshaw.com / fullcalendar / docs / dropping / droppable / 问题是您需要外部添加这些拖动事件。 您可以更改css并将其用于您的使用。 引用 * 拖放。] * http://arshaw.com/fullcalendar/docs/ drop / droppable / 另一个链接： http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html 要捕捉外部事件，您需要添加此代码，但上面的示例已经为您设置了所有内容，并且应该清楚 I have set up FullCalendar to accept drops, which it does. But the draggable object, which I have constructed with revert:'invalid' does not seem to recognize the dates on FullCalendar as droppable, and reverts back. Here is my code: When I drag the draggable element onto the calendar, the element reverts back (suggesting that the calendar date was not recognized as a valid droppable)....but the drop callback is triggered with the expected alert (suggesting that FullCalendar recognized the draggable as valid). I would expect that the draggable should not revert back. Am I doing or expecting something wrong? I have searched all over, but not found anything to explain this. Any help would be greatly appreciated. Update: Forgot to mention, what I have called "fullcalendar-bundle.js" is a file containing the following: Another update: I have just tried the FullCalendar 1.5.3 release, but see the same behavior. This may help you: working version of drag and drop : http://jsfiddle.net/wkKfB/15/ Solution for dragobj = false is that you need to bind droppable event to the calendar so that draggable knows what DOM object is droppable see working example here: http://jsfiddle.net/CZQkm/3/ && http://jsfiddle.net/DEsdN/12/
*Until here (Your version but with some tweaks. By the way I have jsfiddl-ed your issue here: http://jsfiddle.net/wkKfB/16/) (issue was binding the external event) Good documentation reside here: http://arshaw.com/fullcalendar/docs/dropping/droppable/ Issue was you need to externally add these drag event. You can change the css and make it to your use. Quote *[From the documentation above around external drag and drop.]* http://arshaw.com/fullcalendar/docs/dropping/droppable/ another link: http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html To capture the external event you need to add this code but the sample above has all set for you and should be clear
这篇关于Fullcalendar：即使fullcalendar接受drop，可拖动对象也会拒绝fullcalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
*到此为止
>我如何使用它来添加事件？
>
>好问题。通常需要有一个可以拖到日历上的外部事件列表。
>
>虽然droppable选项可处理通用的jQuery UI可拖动，并且不是专门为添加事件而定制的，但可以通过
>用几行代码实现这一点。关注
> FullCalendar下载中的external-dragging.html示例。你可以
>也可以在线查看示例。
>
>简而言之，您必须在drop回调中自己调用renderEvent。
/ *初始化外部事件
-------------------------- --------------------------------------- * /
$（'＃external （函数（）{
//创建一个事件对象（http://arshaw.com/fullcalendar/docs/event_data/Event_Object/）
//它不需要开始或结束
var eventObject = {
title：$ .trim（$（this）.text（））//使用元素的文本作为事件标题
};
//将事件对象存储在DOM元素中，以便稍后获取它
$（this）.data（'eventObject'，eventObjec t）;
//使用jQuery UI使事件可拖动
$（this）.draggable（{
zIndex：999，
revert：true，//将导致事件返回到
revertDuration：0 //拖动
}之后的原始位置）;
}）;
/ *初始化日历
----------------------------- ------------------------------------ * /
<!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>
> 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.
/* 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
-----------------------------------------------------------------*/
