Fullcalendar: перетаскиваемый объект отклоняет fullcalendar как сбрасываемый, даже если fullcalendar допускает удаление - PullRequest
Новая
       21

Fullcalendar: перетаскиваемый объект отклоняет fullcalendar как сбрасываемый, даже если fullcalendar допускает удаление

10 голосов
/ 14 марта 2012

Я настроил FullCalendar принимать капли, что он и делает. Но перетаскиваемый объект, который я построил с помощью revert: 'invalid', похоже, не распознает даты в FullCalendar как сбрасываемые и возвращается обратно. Вот мой код: 

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

Когда я перетаскиваю перетаскиваемый элемент в календарь, элемент возвращается обратно (предполагая, что календарная дата не была распознана как допустимая отбрасываемая) .... но обратный вызов сброса равен с ожидаемым alert (предполагающий, что FullCalendar распознал перетаскиваемый объект как действительный). Я ожидаю, что перетаскивание не должно вернуться назад. Я делаю или ожидаю что-то не так? Я искал по всему, но не нашел ничего, чтобы объяснить это. Любая помощь будет принята с благодарностью.

Обновление: забыл упомянуть, что я назвал "fullcalendar-bundle.js" - файл, содержащий следующее:

  • JQuery 1.5.2
  • jquery ui 1.8.11
  • плагин fullcalendar 1.5.2

Еще одно обновление: я только что попробовал релиз FullCalendar 1.5.3, но вижу то же поведение.

1 Ответ

5 голосов
/ 24 марта 2012

Это может вам помочь:

рабочая версия перетаскивания : http://jsfiddle.net/wkKfB/15/

Решение для dragobj = false равно что вам нужно привязать событие dropppable к календарю, чтобы draggable знал, что такое объект DOM droppable см. рабочий пример здесь: http://jsfiddle.net/CZQkm/3/ && http://jsfiddle.net/DEsdN/12/* До здесь

( Ваша версия, но с некоторыми изменениями. Кстати, я jsfiddl-ed вашу проблему здесь: http://jsfiddle.net/wkKfB/16/) (проблема былапривязка внешнего события)

Хорошая документация находится здесь: http://arshaw.com/fullcalendar/docs/dropping/droppable/

Проблема в том, что вам нужно было добавить эти события перетаскивания извне.

Вы можете изменить CSS и сделать его

Цитата * [Из документации выше о внешнем перетаскивании.] * 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.

другойссылка: http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html

Чтобы захватить внешнее событие, вам нужно добавить этот код, но в приведенном выше примере все готово для вас и должно быть ясно 

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