Fullcalendar: objeto arrastrable rechaza fullcalendar como desplegable aunque fullcalendar acepta drop

He configurado FullCalendar para aceptar bloqueos, lo cual hace. Pero el objeto que se puede arrastrar, que he construido con revert: 'invalid' no parece reconocer las fechas en FullCalendar como droppable, y se revierte. Aquí está mi código:Fullcalendar: objeto arrastrable rechaza fullcalendar como desplegable aunque fullcalendar acepta 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>

Cuando arrastrar el elemento arrastrable en el calendario, el elemento vuelve (lo que sugiere que la fecha del calendario no fue reconocido como válido lanzables) .... pero la devolución de llamada gota es activado con la alerta esperada (lo que sugiere que FullCalendar reconoció que el arrastrable es válido). Esperaría que el arrastrable no se revierte. ¿Estoy haciendo o esperando algo mal? He buscado por todas partes, pero no he encontrado nada para explicar esto. Cualquier ayuda sería muy apreciada.

Actualización: Se olvidó de mencionar, lo que he llamado "fullcalendar-bundle.js" es un archivo que contiene lo siguiente:

jQuery 1.5.2
jQuery UI 1.8.11
fullcalendar 1.5.2 plugin

Otra actualización: Acabo de probar la versión FullCalendar 1.5.3, pero veo el mismo comportamiento.

Fuente

2012-03-14 Flavius

Esto puede ayudarle a:

versión de trabajo de arrastrar y soltar: http://jsfiddle.net/wkKfB/15/

Solución para dragobj = falso es que es necesario unir caso lanzables para el calendario para que arrastrable sabe qué objeto DOM es droppable ver ejemplo de trabajo aquí: http://jsfiddle.net/CZQkm/3/ & & http://jsfiddle.net/DEsdN/12/ * Hasta aquí

(Su versión pero con algunos retoques. Por cierto he jsfiddl-ed su problema aquí: http://jsfiddle.net/wkKfB/16/) (tema era obligatorio el evento externo)

buena documentación residen aquí: http://arshaw.com/fullcalendar/docs/dropping/droppable/

problema era que necesita añadir externamente éstos evento de arrastre.

Puede cambiar el CSS y hacerlo a su gusto.

Cita * [De la documentación de arriba sobre arrastrar y soltar externo.] * 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.

otro enlace: http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html

para capturar el evento externo es necesario añadir este código, pero el ejemplo anterior tiene todo listo para usted y debe quedar claro

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

Fuente

2012-03-24 06:02:51

Fullcalendar: objeto arrastrable rechaza fullcalendar como desplegable aunque fullcalendar acepta drop

Respuesta

Cuestiones relacionadas