Fullcalendar: obiekt, który można przeciągnąć, odrzuca pełno-kalendarza jako droppable, mimo że fullcalendar przyjmuje kroplę

Ustawiłem FullCalendar, aby akceptował kropelki, co robi. Ale obiekt przeciągany, który skonstruowałem z funkcją "cofnij", wydaje się nie rozpoznawać dat w FullCalendar jako zrzucanych i wraca z powrotem. Tu jest mój kodu:Fullcalendar: obiekt, który można przeciągnąć, odrzuca pełno-kalendarza jako droppable, mimo że fullcalendar przyjmuje kroplę

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 

    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
    <title>mydrag</title> 
    <script src="fullcalendar-bundle.js" type="text/javascript"></script> 
</head><body> 
<div id="mydrag" style="width: 200px; height: 100px; background-color: red;">My Drag</div> 
<div id="calendar"></div> 


<script type="text/javascript"> 
function onExternalEventDrop(date, allDay) { 
    alert("Dropped on " + date + " with allDay=" + allDay); 
} 

$('#mydrag').each(function() { 

    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) 
    // it doesn't need to have a start or end 
    var eventObject = { 
     title: 'MyDrag Title' 
    }; 

    // store the Event Object in the DOM element so we can get to it later 
    $(this).data('eventObject', eventObject); 

    // make the event draggable using jQuery UI 
    $(this).draggable({ 
     helper: 'clone', 
     //revert: 'invalid', 
     revert: function(droppableObj) { 
      //if false then no socket object drop occurred. 
      if(droppableObj === false) { 
       //revert the .myselector object by returning true 
       alert('Not a droppable object'); 
       return true; 
      } 
      else { 
       //droppableObj was returned, 
       //we can perform additional checks here if we like 
       //alert(droppableObj.attr('id')); would work fine 
       //return false so that the .myselector object does not revert 
       return false; 
      } 
     }, 
     revertDuration: 500, // original position after the drag 
     start: function(e, ui) { 
      $(ui.helper).css('width', $(this).css('width')); 
     } 
    }); 

}); 

$('#calendar').fullCalendar({ 
    aspectRatio: 2.25, 
    header: { 
     left: '', 
     center: 'title', 
     right: 'prev,next' 
    }, 
    columnFormat: { 
     month: 'dddd' 
    }, 
    droppable: true, 
    drop: onExternalEventDrop 
}); 

</script> 
</body></html>

Kiedy przeciągnąć element Draggable na kalendarzu, element powraca (sugerując, że data kalendarz nie został rozpoznany jako prawidłowy droppable) .... ale zwrotna jest spadek wywołany z oczekiwanym alertem (sugerującym, że FullCalendar uznał, że przeciągnięcie jest prawidłowe). Spodziewam się, że przeciąganie nie powinno się cofać. Czy robię lub oczekuję czegoś złego? Przeszukałem wszystko, ale nie znalazłem niczego, co mogłoby to wyjaśnić. Każda pomoc będzie bardzo ceniona.

Aktualizacja: Zapomniałem wspomnieć, co nazwałem "fullcalendar-bundle.js" to plik zawierający następujące:

jQuery 1.5.2
jQuery UI 01.08.11
fullcalendar 1.5.2 plugin

Kolejna aktualizacja: Właśnie wypróbowałem wersję FullCalendar 1.5.3, ale widzę to samo zachowanie.

Źródło

2012-03-14 Flavius

To może pomóc:

wersja robocza przeciągnij i upuść: http://jsfiddle.net/wkKfB/15/

rozwiązanie dla dragobj = false jest że trzeba wiązać droppable wydarzenie do kalendarza, tak aby przeciągany wie, czym jest obiekt DOM droppable patrz przykład działania tutaj: http://jsfiddle.net/CZQkm/3/ & & http://jsfiddle.net/DEsdN/12/ * Do tego czasu

(Twoja wersja, ale z kilkoma poprawkami. Przy okazji mam jsfiddl-ED problemu tutaj: http://jsfiddle.net/wkKfB/16/) (problem został wiążącego zdarzenie zewnętrzne)

Dobra dokumentacja rezydują tutaj: http://arshaw.com/fullcalendar/docs/dropping/droppable/

Issue było trzeba zewnętrznie dodać te zdarzenie przeciągania.

Możesz zmienić css i zrobić to na swój użytek.

Cytat * [Z dokumentacji powyższej wokół zewnętrznej przeciągnij i upuść.] * http://arshaw.com/fullcalendar/docs/dropping/droppable/

>  How can I use this to add events??? 
>  
>  Good question. It is a common need to have an "external list of events" that can be dragged onto the calendar. 
>  
>  While the droppable option deals with generic jQuery UI draggables and is not specifically tailored to adding events, it is possible to 
> achieve this with a few lines of code. Follow the 
> external-dragging.html example in FullCalendar's download. You can 
> also view the example online. 
>  
>  In short, you must call renderEvent yourself in the drop callback.

inny link: http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html

Aby przechwycić zdarzenie zewnętrzne trzeba dodać ten kod, ale przede próbka ma wszystko gotowe dla Ciebie i powinno być jasne

/* initialize the external events 
    -----------------------------------------------------------------*/ 
$('#external-events div.external-event').each(function() { 

    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) 
    // it doesn't need to have a start or end 
    var eventObject = { 
     title: $.trim($(this).text()) // use the element's text as the event title 
    }; 

    // store the Event Object in the DOM element so we can get to it later 
    $(this).data('eventObject', eventObject); 

    // make the event draggable using jQuery UI 
    $(this).draggable({ 
     zIndex: 999, 
     revert: true,  // will cause the event to go back to its 
     revertDuration: 0 // original position after the drag 
    }); 

}); 


/* initialize the calendar 
-----------------------------------------------------------------*/

Źródło

2012-03-24 06:02:51

Fullcalendar: obiekt, który można przeciągnąć, odrzuca pełno-kalendarza jako droppable, mimo że fullcalendar przyjmuje kroplę

Odpowiedz

Powiązane problemy