Fullcalendar: как надежно получить ссылку на элемент HTML для поля даты, в которое был удален внешний элемент - PullRequest
Новая
       14

Fullcalendar: как надежно получить ссылку на элемент HTML для поля даты, в которое был удален внешний элемент

0 голосов
/ 21 марта 2012

Я хотел бы получить способ получить элемент 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);

(я использую методы YUI 3 Y.one () и ancestor () выше, чтобы получить нужный мне узел, но можно использовать и другие методы.)

Вышеприведенный код правильно определяет местонахождение блока даты, если капля НЕ попадает на верхнюю часть ячейки события, отображаемой в эту дату. Однако если падение действительно попадает в ячейку события, domElem оказывается ячейкой события, которая является абсолютно позиционированным элементом вне календаря, и приведенная выше методология ancestor () не работает.

Я также пытался получить ссылку на сбрасываемый объект с помощью свойства возврата перетаскиваемого элемента: 

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

К сожалению, вышесказанное не работает. Даже несмотря на то, что внешний элемент правильно выпадает, функция возврата не распознает календарь как сбрасываемый. (Подробности см. В моем предыдущем сообщении stackoverflow по адресу: Fullcalendar: перетаскиваемый объект отклоняет fullcalendar как сбрасываемый, даже если fullcalendar принимает drop )

Единственная альтернатива, которую я могу придумать, - это использовать объект date в обратном вызове drop (), и с этим найти правильный элемент fc-dayXX, но это кажется довольно громоздким. Я уже искал по этому вопросу, но пока ничего не нашел. Если у кого-нибудь есть предложение, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 11 апреля 2012

Вот то, что я придумал для обратного вызова полного календаря: 

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

У меня работает!

...