Удаление события jQuery FullCalendar перетаскиванием - PullRequest
Новая
       15

Удаление события jQuery FullCalendar перетаскиванием

2 голосов
/ 05 апреля 2011

У меня есть этот код: 

eventDragStop: function(event, jsEvent, ui, view) {
    calendar.fullCalendar('removeEvents', event.id);
}

Но я застрял там. Я хотел бы иметь возможность перетаскивать событие через div с именем класса «event-delete» и событие удаляется.

Я пробовал несколько способов определить, перетаскивается ли событие через div удаления безрезультатно. Решение выше, кажется, частично работает. Триггер события работает, но замораживает любой перетаскиваемый элемент на месте.

Ответы [ 5 ]

6 голосов
/ 08 августа 2011

просто настройте это и добавьте в свой js. 

        $('#calendar').children('.fc-content').children().append('<div id="calendarTrash" style="float: right; padding-top: 5px; padding-right: 5px; padding-left: 5px;"><span class="ui-icon ui-icon-trash"></span></div>');

    //listens for drop event
    $("#calendarTrash").droppable({
        tolerance: 'pointer',
        drop: function(event, ui) { 
            if ( dragged && ui.helper && ui.helper[0] === dragged[0] ) {
                var event = dragged[1];
                var answer = confirm("Delete Event?")
                if (answer)
                {
                    $.ajax({
                        url:'/employees/removeevent?id='+event.id,
                        dataType: 'json',
                        async: false,
                        error: function(xhr, ajaxOptions, thrownError)
                        {
                            //console.log(xhr.status);
                            //console.log(thrownError);
                        },
                        success: function()
                        {
                            calendar.fullCalendar( 'removeEvents' , event.id  );
                        }
                    });
                }
            }
        }
    });

        eventDragStart: function( event, jsEvent, ui, view ) { 
            dragged = [ ui.helper[0], event ];
        },
1 голос
/ 12 января 2014

Этот ответ основан на ответе T.Stone.

  • Все события должны иметь ' id '. 

    var calendar = $('#calendar').fullCalendar({
...
eventDragStop: function(event, jsEvent, ui, view) { 
               //console.log(event.id);
                if (isElemOverDiv(ui, $('div#delete-events'))) {
                    calendar.fullCalendar('removeEvents', event.id);
                }
            }
});


//And an helper function:


var isElemOverDiv = function(draggedItem, dropArea) {
        var dragged = $(draggedItem)[0].offset;

        var b = $(dropArea);
        var limitX = parseInt(b.offset().left) + parseInt(b.outerWidth());
        var limitY = parseInt(b.offset().top) + parseInt(b.outerHeight());

        // Compare
        if ( limitY >=   parseInt(dragged.top) 
            && limitX >=   parseInt(dragged.left) ) 
        { 
            return true; 
        }
        return false;
    }

У меня сработало идеально!

Большое спасибо Т.Стоуну за его ведущую идею:)

1 голос
/ 05 апреля 2011

Прошло много времени с тех пор, как я использовал fullcalendar, но если я правильно помню, ui дает вам доступ к самому элементу, который перетаскивается, правильно?Если это так, вы можете получить координаты перетаскиваемого элемента и координаты удаляемого элемента div и проверить, находятся ли они внутри друг друга.

jQuery предоставляет доступ к координатам относительно страницы через .offset(),Координаты дают только top и left, однако правое и нижнее можно вычислить, используя высоту и ширину элемента.

(не проверено, но общая идея) 

var isElemOverDiv = function(draggedItem, dropArea) {
   // Prep coords for our two elements
   var a = $(draggedItem).offset();
   a.right = $(draggedItem).outerWidth() + a.left;
   a.bottom = $(draggedItem).outerHeight() + a.top;

   var b = $(dropArea).offset();
   a.right = $(dropArea).outerWidth() + b.left;
   a.bottom = $(dropArea).outerHeight() + b.top;

   // Compare
   if (a.left >= b.left
       && a.top >= b.top
       && a.right <= b.right
       && a.bottom <= b.bottom) { return true; }
   return false;
}

eventDragStop: function(event, jsEvent, ui, view) {
    if (isElemOverDiv(ui, $('div.event-delete'))) {
        calendar.fullCalendar('removeEvents', event.id);
    }
}

Одинхитрая часть здесь isElemOverDiv(ui, ....Я не помню, каково значение ui.Возможно, вам придется изменить это на что-то вроде ui.element, чтобы получить фактическую ссылку на элемент.

0 голосов
/ 23 июня 2018

я говорю вам drop: функция (событие, интерфейс) ui :: ui содержит пустой объект. До версии 2.1 объект пользовательского интерфейса jQuery. :) и работай тогда jsEvent :) sn: 

eventDragStop: function(event, jsEvent, ui, view) {

       if (isElemOverDiv(jsEvent, $('div#external-events'))) {

           console.log(isElemOverDiv(jsEvent, $('div#external-events')));
           $('.calendario').fullCalendar('removeEvents', event.id);
       }
   }

  var isElemOverDiv = function(draggedItem, dropArea) {
  var p = dropArea;
  var position = p.position();
  console.log("EL DROP AREA left: " + position.left + ", top: " + position.top);
  console.log('draggedItem.pageY ', draggedItem.clientX, draggedItem.pageY);
  if (draggedItem.clientX >= position.left && draggedItem.pageY >= position.top) {
      return true;
  }
  return false;

}

0 голосов
/ 12 апреля 2011

Я обновил демо-файл с внешним перетаскиванием и разместил код в комментариях к http://code.google.com/p/fullcalendar/issues/detail?id=550. Надеюсь, что это поможет.

Код позволяет перетаскивать события и возвращаться к ним.календарь.

Я использовал Chrome для тестирования.

...