2012-03-21 1 views
0

HTML要素またはCSSセレクタ(またはドロップ可能オブジェクト自体への参照)を取得する方法外部のドラッグ可能な要素を落とした。 ( 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); 

は(私はYUI 3 Y.one()と祖先を使用しています:私は、ドロップイベントの座標を使用して、日付ボックスのノードを取得するには、ドロップ()コールバック内で次を使用してみました)メソッドを使用して、必要なノードを取得することができます。

上記では、ドロップがイベントセルの上に表示されない限り、日付ボックスのノードを正しく特定しています日付。しかし、ドロップがイベントセルに着くと、domElemはイベントセルになります。イベントセルは、カレンダーの外にある絶対配置された要素です。上記のancestor()メソッドは機能しません。私もドラッグ可能な要素によって財産を元に戻すobjをドロップ可能への参照を取得しようとしている

:残念ながら

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

、上記動作しません。外部要素が正しくドロップされても、復帰機能はカレンダーを削除可能として認識しません。 (詳細については、私の以前の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; 
} 

作品を私のために!

関連する問題