程序员经验分享-hwhale

Fullcalendar：可拖动对象拒绝将 fullcalendar 视为可放置，即使 fullcalendar 接受放置

2024-01-04

我已经将 FullCalendar 设置为接受 drop，确实如此。但是我用 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>

当我将可拖动元素拖到日历上时，该元素会恢复原状（表明日历日期未被识别为有效的可放置元素）......但是放置回调is触发预期的警报（表明 FullCalendar 识别可拖动为有效）。我希望可拖动的内容不应该恢复回来。我做错了什么或者期待什么错了吗？我到处搜索，但没有找到任何可以解释这一点的东西。任何帮助将不胜感激。

更新：忘记提及，我所说的“fullcalendar-bundle.js”是一个包含以下内容的文件：

  • jquery 1.5.2
  • jquery 用户界面 1.8.11
  • 全日历 1.5.2 插件

另一个更新：我刚刚尝试了 FullCalendar 1.5.3 版本，但看到了相同的行为。


这可能会帮助您：

拖放的工作版本 : http://jsfiddle.net/wkKfB/15/ http://jsfiddle.net/wkKfB/15/

Dragobj = false 的解决方案是您需要将可放置事件绑定到日历，以便可拖动的知道 DOM 对象是什么可丢弃的请参阅此处的工作示例：http://jsfiddle.net/CZQkm/3/ http://jsfiddle.net/CZQkm/3/&&http://jsfiddle.net/DEsdN/12/ http://jsfiddle.net/DEsdN/12/ *直到这里

(您的版本，但进行了一些调整。顺便说一句，我在这里 jsfiddl-ed 你的问题：http://jsfiddle.net/wkKfB/16/ http://jsfiddle.net/wkKfB/16/) （问题是绑定外部事件）

好的文档位于此处：http://arshaw.com/fullcalendar/docs/dropping/droppable/ http://arshaw.com/fullcalendar/docs/dropping/droppable/

问题是您需要从外部添加这些拖动事件。

您可以更改 css 并使其适合您的使用。

Quote *[来自上面有关外部拖放的文档。]* http://arshaw.com/fullcalendar/docs/dropping/droppable/ 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 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
-----------------------------------------------------------------*/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

fullcalendar

draggable

droppable

Fullcalendar：可拖动对象拒绝将 fullcalendar 视为可放置，即使 fullcalendar 接受放置 的相关文章

随机推荐

热门标签