FullCalendar HTML5 拖放 API

Question

我希望能够从多台显示器拖放，这样我就可以在一台显示器上列出任务列表，然后拖到第二台显示器的日历上。这在 JQuery UI 的当前实现中是不可行的，因为范围仅限于同一个窗口。

在玩了之后，我找到了一种让这项工作满足我需求的 hacky 方法。答案仍然需要修改，但如果您正在寻找类似的东西，它可以为您提供指导。

Answer 1

我确信这仍然需要一些调整，但能够让 FullCalendar 与 HTML5 Drag & Drop API 一起工作。基本上我正在使用数学来了解项目在日历上的位置以及哪个时间段。我正在使用完整日历中内置的 eventAfterAllRender 功能来添加我的逻辑。这对我有用，也许可以帮助你或让你朝着正确的方向前进。在放置时，我正在设置一个私有 onDrop 函数，该函数将日期/时间带到该项目被放置的位置。 （目前我没有将它作为 momentjs 对象，但计划这样做）。

//Global Variables
var onDrop = null;
var currentMousePos = { x: -1, y: -1 };

eventAfterAllRender: function (view) {
                var currentDate = null;
                var currentTime = null;
                var dateRange = [];
                var timeRange = [];

                if (view.type == 'month') {
                    $('.fc-widget-content').each(function () {
                        if ($(this).attr('data-date') != null) {
                            var bounds = $(this)[0].getBoundingClientRect();

                            dateRange.push({
                                date: $(this).attr('data-date'),
                                bounds: bounds
                            })
                        }
                    });
                } else {
                    $('.fc-widget-header').each(function () {
                        if ($(this).attr('data-date') != null) {
                            var bounds = $(this)[0].getBoundingClientRect();

                            dateRange.push({
                                date: $(this).attr('data-date'),
                                bounds: bounds
                            })
                        }
                    });

                    $('.fc-slats tr').each(function () {
                        if ($(this).attr('data-time') != null) {
                            var bounds = $(this)[0].getBoundingClientRect();

                            timeRange.push({
                                time: $(this).attr('data-time'),
                                bounds: bounds
                            })
                        }
                    });
                }

                $(document).mousemove(function (event) {
                    currentMousePos.x = event.pageX;
                    currentMousePos.y = event.pageY;

                    currentDate = null;
                    currentTime = null;

                    for (var dIdx = 0; dIdx < dateRange.length; ++dIdx) {
                        if (dateRange[dIdx].bounds.left <= currentMousePos.x && dateRange[dIdx].bounds.right > currentMousePos.x) {
                            if (view.type == 'month') {
                                if (dateRange[dIdx].bounds.top < currentMousePos.y && dateRange[dIdx].bounds.bottom >= currentMousePos.y) {
                                    currentDate = dateRange[dIdx];
                                    break;
                                }
                            } else {
                                currentDate = dateRange[dIdx];
                                break;
                            }
                        }
                    }

                    for (var tIdx = 0; tIdx < timeRange.length; ++tIdx) {
                        if (timeRange[tIdx].bounds.top < currentMousePos.y && timeRange[tIdx].bounds.bottom >= currentMousePos.y) {
                            currentTime = timeRange[tIdx];
                            break;
                        }
                    }

                    if (currentDate != null && currentTime != null) {
                        var originalOnDrop = onDrop;
                        if (onDrop != null) {
                            onDrop = null;
                            if (originalOnDrop != null) {
                                originalOnDrop(currentDate.date + ' ' + currentTime.time);
                            }
                        }
                    } else if (currentDate != null) {
                        var originalOnDrop = onDrop;
                        if (onDrop != null) {
                            onDrop = null;
                            if (originalOnDrop != null) {
                                originalOnDrop(currentDate.date);
                            }
                        }
                    }
                });
            }

//HTML5 Drag Event Captured
self.HandleDrop = function (command, data) {
    switch (command) {
        case 'Workorder':
            onDrop = function (date) {
                $('#myTime').html(date);
                console.log(command);
                console.log(data);
            }
            break;
    } 
}