Fullcalendar: l'oggetto trascinabile rifiuta fullcalendar come droppable anche se fullcalendar accetta drop

Ho impostato FullCalendar per accettare i drop, cosa che fa. Ma l'oggetto trascinabile, che ho costruito con revert: 'invalid' non sembra riconoscere le date su FullCalendar come trascinabili, e ritorna indietro. Ecco il mio codice:Fullcalendar: l'oggetto trascinabile rifiuta fullcalendar come droppable anche se fullcalendar accetta drop

<!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>

Quando ho trascinare l'elemento trascinabile sul calendario, l'elemento ritorna (suggerendo che la data di calendario non è stato riconosciuto come un droppable valido) .... ma la richiamata goccia è attivato con l'avviso previsto (suggerendo che FullCalendar ha riconosciuto che il trascinamento è valido). Mi aspetterei che il draggable non debba tornare indietro. Sto facendo o mi aspetto qualcosa di sbagliato? Ho cercato dappertutto, ma non ho trovato nulla per spiegarlo. Qualsiasi aiuto sarebbe molto apprezzato.

Aggiornamento: Ho dimenticato di menzionare, che io ho chiamato "fullcalendar-bundle.js" è un file che contiene il seguente:

jQuery 1.5.2
jQuery UI 1.8.11
fullcalendar 1.5.2 plug-in

Un altro aggiornamento: ho appena provato la versione 1.5.3 di FullCalendar, ma vedo lo stesso comportamento.

fonte

2012-03-14 Flavius

Questo può aiutare:

versione funzionante di drag and drop: http://jsfiddle.net/wkKfB/15/

Soluzione per dragobj = falso è che hai bisogno di impegnare evento droppable al calendario in modo che trascinabili sa quale oggetto DOM è droppable vedere l'esempio di lavoro qui: http://jsfiddle.net/CZQkm/3/ & & http://jsfiddle.net/DEsdN/12/ * Fino a qui

(La tua versione ma con alcune modifiche. Tra l'altro ho jsfiddl-cato il problema qui: http://jsfiddle.net/wkKfB/16/) (problema era vincolante l'evento esterno)

buona documentazione risiedono qui: http://arshaw.com/fullcalendar/docs/dropping/droppable/

problema è stato che è necessario aggiungere esternamente questi evento di trascinamento.

È possibile modificare il css e renderlo al vostro uso.

Citazione * [Dalla documentazione sopra intorno il drag and drop esterno.] * 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.

un altro collegamento: http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html

per catturare l'evento esterno è necessario aggiungere questo codice, ma il campione ha sopra tutto pronto per voi e dovrebbe essere chiaro

/* 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 
-----------------------------------------------------------------*/

fonte

2012-03-24 06:02:51

Fullcalendar: l'oggetto trascinabile rifiuta fullcalendar come droppable anche se fullcalendar accetta drop

risposta

Problemi correlati