Question

我正在尝试使用FullCalendar.js实现拖放，这个想法基本上是在左边有一个菜单，其中有一个可拖动的事件列表，你可以放在日历上（然后执行一个函数）这会将这些添加到GoogleCalendar中。

我的问题是'drop'由于某种原因无效，我可以将文本拖到顶部，但是在FullCalendar上没有触发“drop”事件：

HTML：

<div class="wrapper wrapper-content" id="calendar-wrap">
    <div class="row animated fadeInDown">
        <div class="col-lg-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Draggable Events</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id='external-events'>
                        <p>Drag a event and drop into calendar.</p>
                        <div id="evt1" class='external-event navy-bg'>Call Client.</div>
                        <div id="evt2" class='external-event navy-bg'>Confirm Client Happy with Quote.</div>
                        <div id="evt3" class='external-event navy-bg'>Send Quote.</div>
                        <div id="evt4" class='external-event navy-bg'>Something Else.</div>
                        <div id="evt5" class='external-event navy-bg'>One more for luck.</div>
                        <p class="m-t">
                            <input type='checkbox' id='removeEventAfterDrop' checked /> <label for='removeEventAfterDrop'>remove after drop</label>
                        </p>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Calendar Monthly View </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="myFullCalendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>

JS：

$(document).ready(function() {


    /* initialize the external events
     -----------------------------------------------------------------*/

    $('div.external-event').each(function() {
                    console.log("external event");
        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 1000,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });


    /* initialize the calendar
     -----------------------------------------------------------------*/
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#myFullCalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        drop: function(){
            console.log("dropped");
        },
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },

        ]
    });


});

Js Fiddle： https://jsfiddle.net/filipecss/x74so0tz/7/

可能导致此问题的原因是什么？

提前致谢，

Answer 1

事实证明我的小提琴中的问题是外部css文件之一：

https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.print.css

显然fullcalender.print.css打破了拖放。

使用FullCalendar拖放事件

1 个答案: