FullCalendar HTML5 Drag & Drop Api

Question

Я хотел иметь возможность перетаскивания с нескольких мониторов, чтобы у меня был список задач на одном мониторе и перетаскивание на календарь второго монитора. Это было невозможно в текущей реализации пользовательского интерфейса JQuery, поскольку область действия ограничена тем же окном.

После игры я нашел хакерский способ сделать эту работу для своих нужд. Ответ все еще нуждается в изменениях, но он может помочь вам, если вы ищете что-то подобное.

Answer 1

Я уверен, что для этого все еще потребуется некоторая настройка, но он смог заставить FullCalendar работать с HTML5 Drag & Drop API. В основном я использую математику, чтобы знать, где элемент был сброшен в календаре и в какой временной интервал Я использую функцию eventAfterAllRender, встроенную в полный календарь, чтобы добавить свою логику. Это работает для меня и может помочь вам или направит вас в правильном направлении. При отбрасывании я устанавливаю частную функцию onDrop, которая принимает дату / время, в которое элемент был сброшен. (В настоящее время я не имею его в качестве объекта момента, но планирую).

//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;
    } 
}