Question

我想要一种获取HTML元素或CSS选择器（或对droppable对象本身的引用）的方法，以获取删除外部可拖动元素的日期。我尝试在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);

（我使用上面的YUI 3 Y.one（）和ancestor（）方法来获取我想要的节点，但是可以使用其他方法。）

只要下落没有落在该日期呈现的事件单元格顶部，上面就能正确定位日期框的节点。但是，如果丢弃确实落在事件单元格上，则domElem最终成为事件单元格，它是日历之外的绝对定位元素，并且上面的祖先（）方法不起作用。

我也尝试通过draggable element revert属性获取对droppable obj的引用：

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

不幸的是，上述方法无效。即使外部元素确实正确删除，恢复功能也不会将日历识别为droppable。（有关详细信息，请参阅我之前的stackoverflow帖子：Fullcalendar: draggable object rejects fullcalendar as droppable even though fullcalendar accepts drop）

我能想到的唯一选择是在drop（）回调中使用日期对象，并使用它找到正确的fc-dayXX元素，但这看起来非常麻烦。我已经搜索过这个，但到目前为止还没找到任何东西。如果有人有任何建议，请告诉我。

Answer 1

以下是我提出的fullcalendar drop callback的内容：

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

适合我！

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

1 个答案: