2012-03-14 16 views
9

Tôi đã thiết lập FullCalendar để chấp nhận các giọt. Nhưng đối tượng có thể kéo được, mà tôi đã xây dựng để hoàn nguyên: 'không hợp lệ' dường như không nhận ra những ngày trên FullCalendar là có thể phân hủy và quay lại. Đây là mã của tôi:Fullcalendar: đối tượng có thể kéo từ chối fullcalendar dưới dạng có thể phân đoạn mặc dù fullcalendar chấp nhận thả

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

Khi tôi kéo các phần tử kéo lên lịch, yếu tố được khôi phục trở lại (gợi ý rằng ngày lịch đã không được công nhận là một droppable hợp lệ) .... nhưng thả callback được kích hoạt với cảnh báo dự kiến ​​(gợi ý rằng FullCalendar đã nhận dạng được khả năng kéo được là hợp lệ). Tôi hy vọng rằng các draggable không nên trở lại. Tôi đang làm hoặc mong đợi điều gì đó sai? Tôi đã tìm kiếm trên tất cả, nhưng không tìm thấy bất cứ điều gì để giải thích điều này. Mọi sự trợ giúp sẽ rất được trân trọng.

Cập nhật: Quên đề cập đến, những gì tôi đã được gọi là "fullcalendar-bundle.js" là một tập tin chứa những điều sau đây:

  • jquery 1.5.2
  • jquery ui 1.8.11
  • fullcalendar 1.5.2 plugin

Cập nhật khác: Tôi vừa thử bản phát hành FullCalendar 1.5.3 nhưng thấy cùng một hành vi.

Trả lời

5

Điều này có thể giúp bạn:

phiên bản làm việc của kéo và thả: http://jsfiddle.net/wkKfB/15/

Giải pháp cho dragobj = false là mà bạn cần để ràng buộc sự kiện droppable lịch để kéo biết đối tượng DOM là gì droppable xem ví dụ hoạt động tại đây: http://jsfiddle.net/CZQkm/3/ & & http://jsfiddle.net/DEsdN/12/ * Cho đến đây

(Phiên bản của bạn nhưng có một số chỉnh sửa. Bằng cách này tôi đã jsfiddl-ed vấn đề của bạn ở đây: http://jsfiddle.net/wkKfB/16/) (vấn đề đã được ràng buộc các sự kiện bên ngoài)

Tốt tài liệu cư trú ở đây: http://arshaw.com/fullcalendar/docs/dropping/droppable/

Issue là bạn cần phải bên ngoài thêm các sự kiện kéo.

Bạn có thể thay đổi css và làm cho nó sử dụng.

Trích dẫn * [Từ tài liệu ở trên xung quanh kéo và thả bên ngoài.] * 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. 

một liên kết khác: http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html

Để nắm bắt được sự kiện bên ngoài bạn cần phải thêm mã này, nhưng ví dụ trên có tất cả bộ cho bạn và phải rõ ràng

/* 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 
-----------------------------------------------------------------*/ 
Các vấn đề liên quan