Javascript FullCalendar HTML5拖放；下降Api

我希望能够从多个监视器拖放，这样我就可以在一个监视器上有一个任务列表，并将其拖到第二个监视器的日历上。这对于当前的jQueryUI实现是不可行的，因为范围限制在同一个窗口中

---

在玩了一番之后，我找到了一个很好的方法来满足我的需要。答案仍然需要修改，但如果您正在寻找类似的东西，它可能会指导您。

我相信这仍然需要一些调整，但能够让FullCalendar与HTML5拖放API一起工作。基本上，我是用数学来知道这个项目在日历上的位置和时间段。我正在使用完整日历中内置的eventAfterAllRender功能来添加我的逻辑。这对我来说很有用，也许可以帮助你或者让你走上正确的方向。我正在设置一个私有onDrop函数，该函数将项目放置到的日期/时间。（目前我没有将其作为momentjs对象，但计划将其作为）

//全局变量
var-onDrop=null；
var currentMousePos={x:-1，y:-1}；
eventAfterAllRender:函数（视图）{
var currentDate=null；
var currentTime=null；
var dateRange=[]；
var时间范围=[]；
如果（view.type='month'）{
$（'.fc小部件内容'）。每个（函数（）{
if（$（this）.attr（'data-date'）！=null）{
var-bounds=$（this）[0]。getBoundingClientRect（）；
dateRange.push({
日期：$（this.attr（'data-date'），
界限：界限
})
}
});
}否则{
$（'.fc小部件标题'）。每个（函数（）{
if（$（this）.attr（'data-date'）！=null）{
var-bounds=$（this）[0]。getBoundingClientRect（）；
dateRange.push({
日期：$（this.attr（'data-date'），
界限：界限
})
}
});
$（'.fc slats tr'）。每个（函数（）{
if（$（this）.attr（'data-time'）！=null）{
var-bounds=$（this）[0]。getBoundingClientRect（）；
时间范围推送({
时间：$（this.attr（'data-time'），
界限：界限
})
}
});
}
$（文档）.mousemove（函数（事件）{
currentMousePos.x=event.pageX；
currentMousePos.y=event.pageY；
currentDate=null；
currentTime=null；
对于（var dIdx=0；dIdx=currentMousePos.y）{
currentDate=日期范围[dIdx]；
打破
}
}否则{
currentDate=日期范围[dIdx]；
打破
}
}
}
对于（变量tIdx=0；tIdx=currentMousePos.y）{
currentTime=时间范围[tIdx]；
打破
}
}
if（currentDate！=null&¤tTime！=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拖动事件
self.HandleDrop=功能（命令、数据）{
开关（命令）{
案例“工作订单”：
onDrop=功能（日期）{
$（'#myTime'）.html（日期）；
console.log（命令）；
控制台日志（数据）；
}
打破
} 
}

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