Fullcalendar:如何可靠地获取对删除外部元素的日期框的HTML元素的引用

Question

我想要一种方法来获得一个HTML元素或CSS选择器（或对可丢弃对象本身的引用），以确定外部可拖动元素被丢弃的日期。我尝试在drop（）回调中使用以下内容，使用drop事件的坐标获取日期框的节点：

var pageX = jsEvent.originalEvent.pageX;
var pageY = jsEvent.originalEvent.pageY;
var domElem = document.elementFromPoint(pageX, pageY);
var node = Y.one(domElem).ancestor('#calendar > .fc-content table.fc-border-separate tr > td', true);

（我使用上面的YUI3Y.one（）和ancestor（）方法来获得我想要的节点，但也可以使用其他方法。）

只要下拉框没有落在该日期呈现的事件单元格的顶部，上述操作就可以正确定位日期框的节点。然而，如果水滴确实落在了一个事件单元格上，domElem最终会成为事件单元格，这是日历之外的一个绝对定位的元素，上面的ancestor（）方法不起作用。

我还尝试通过draggable元素revert属性获得对可丢弃对象的引用：

revert: function(droppableObj) {
    if(droppableObj === false) {
        alert('No droppableObj');
        return true;
    }
    else {
        alert(Y.dump({droppableObj: droppableObj}));
        return false;
    }
},

不幸的是，以上内容不起作用。即使外部元素确实正确丢弃，revert函数也不会将日历识别为可丢弃。（有关详细信息，请参阅我之前的stackoverflow文章：Fullcalendar:draggable对象拒绝Fullcalendar作为可丢弃对象，即使fullcalendary接受丢弃）

我能想到的唯一替代方案是在drop（）回调中使用date对象，然后找到正确的fc dayXX元素，但这似乎很麻烦。我已经搜索过了，但到目前为止还没有找到任何东西。如果有人有什么建议，请告诉我。

Answer 1

以下是我为fullcalendar drop回调所做的：

function getSelectorForDroppedOnDate(date, allDay, jsEvent, ui) {
    if (! date) return;
    var displayedDate = $('#calendar').fullCalendar('getDate');
    var displayedMonth = displayedDate.getMonth(); // 0 - 11
    var displayedYear = displayedDate.getFullYear();
    var droppedOnYear = date.getFullYear();
    var droppedOnMonth = date.getMonth(); // 0 - 11
    var droppedOnDate = date.getDate(); // 1 - 31
    var droppedOnDayOfWeek = date.getDay(); // 0 - 6 no matter what week of the month
    // Get values related to the last day of the month before the month the event was dropped on
    // so that the grid location of the drop can be determined
    var lastDayOfMonthBeforeDroppedOnMonth = new Date(droppedOnYear, droppedOnMonth, 0); // This is actually correct
    var dateOfLastDayOfMonthBeforeDroppedOnMonth = lastDayOfMonthBeforeDroppedOnMonth.getDate(); // 1 - 31
    var dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth = lastDayOfMonthBeforeDroppedOnMonth.getDay(); // 0 - 6
    var i;
    var gridLocationOfDrop; // 0 - 41 to cover 42 days of six weeks always shown
    if (droppedOnMonth === displayedMonth) { // dropped on month is same as currently displayed month
        i = 0;
        // adjust droppedOnDayOfWeek by 1 to account for 0-based index
        while ((droppedOnDayOfWeek + 1) + i*7  < droppedOnDate) {
            i++;
        }
        gridLocationOfDrop = droppedOnDayOfWeek + i*7;
    }
    else {
        // if dropped on date is in month previous to currently displayed month (need to compare years since inequality will reverse at year boundary)
        if ((droppedOnMonth < displayedMonth && droppedOnYear === displayedYear) || (droppedOnMonth > displayedMonth && droppedOnYear < displayedYear)) {
            gridLocationOfDrop = droppedOnDayOfWeek;
        }
        // else if dropped on date is in month after currently displayed month (need to compare years since inequality will reverse at year boundary)
        else if ((droppedOnMonth > displayedMonth && droppedOnYear === displayedYear) || (droppedOnMonth < displayedMonth && droppedOnYear > displayedYear)) {
            i = 0;
            // adjust dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth by 1 to account for 0-based index
            while ((dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth + 1) + i*7 < dateOfLastDayOfMonthBeforeDroppedOnMonth) {
                i++;
            }
            gridLocationOfDrop = (dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth + i*7 + droppedOnDate);
        }
    }
    selector = '#calendar > .fc-content table tr > td.fc-day' + gridLocationOfDrop;
    return selector;
}

对我有用！