2012-03-21 1 views
0

날짜에 대해 HTML 요소 또는 CSS 선택기 (또는 droppable 개체 자체에 대한 참조)를 얻는 방법을 원합니다. 외부 draggable 요소가 떨어졌다. ( Fullcalendar : 외부 요소가 삭제 된 날짜 상자에 대한 HTML 요소에 대한 참조를 안정적으로 얻는 방법

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

(나는 유이 3 Y.one()와 조상을 사용하고 있습니다 : 나는 드롭 이벤트의 좌표를 사용하여 날짜 상자에 대한 노드를 얻기 위해 드롭() 콜백 내에서 다음을 사용하여 시도) 메서드를 사용하여 원하는 노드를 얻을 수 있지만 다른 방법을 사용할 수 있습니다.)

위의 코드는 렌더링 된 이벤트 셀 위에 놓이지 않는 한 날짜 상자의 노드를 올바르게 찾습니다. 날짜. 그러나 드롭이 이벤트 셀에 착륙하는 경우 domElem은 이벤트 셀이되어 결국 캘린더 외부의 절대 위치 요소이며 위의 ancestor() 방법론은 작동하지 않습니다.

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

불행하게도, 위에서 작동하지 않습니다

는 또한 속성을 되돌아 드래그 할 수있는 요소의 방법에 의해 obj에 낙하 할에 대한 참조를 얻는 노력했다. 외부 요소가 제대로 삭제 되더라도 되돌리기 기능은 달력을 삭제 가능으로 인식하지 않습니다. (자세한 내용은 이전의 stackoverflow 게시물 Fullcalendar: draggable object rejects fullcalendar as droppable even though fullcalendar accepts drop을 참조하십시오.)

내가 생각할 수있는 유일한 대안은 drop() 콜백에서 date 객체를 사용하고 올바른 fc-dayXX 요소를 찾는 것입니다. 꽤 귀찮은 것 같습니다. 나는 이것을 이미 조사했지만 지금까지 아무것도 발견하지 못했다. 누구든지 제안이 있으면 알려주십시오.

답변

0

는 여기가 fullcalendar 드롭 콜백 해낸 것입니다 :

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

작품을 나를 위해!

관련 문제