Fla*_*ius 10 jquery droppable draggable fullcalendar
我已经设置了FullCalendar来接受drop,它确实如此.但是我用revert构建的可拖动对象:'invalid'似乎并不认可FullCalendar上的日期为droppable,而是还原.这是我的代码:
<!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"是一个包含以下内容的文件:
另一个更新:我刚刚尝试过FullCalendar 1.5.3版本,但看到了相同的行为.
这可能对您有所帮助:
拖放的工作版本:http://jsfiddle.net/wkKfB/15/
解决方案dragobj =假的是,你需要让以可弃事件日历绑定可拖动知道什么DOM对象是可放开看到这里的工作例如: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/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
-----------------------------------------------------------------*/
| 归档时间： |
|
| 查看次数： |
12130 次 |
| 最近记录： |