Блог

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

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

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

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

просто настройте это и добавьте в свой 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 amp;amp; ui.helper amp;amp; 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 ];
        },
  

Прошло некоторое время с тех пор, как я использовал 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
       amp;amp; a.top >= b.top
       amp;amp; a.right <= b.right
       amp;amp; 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 , чтобы получить фактическую ссылку на элемент.

Этот ответ основан на ответе Т.Стоуна.

• Все события должны иметь ‘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) 
              amp;amp; limitX >=   parseInt(dragged.left) ) 
          { 
              return true; 
          }
          return false;
      }
    

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

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

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

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

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

я говорю вам 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 amp;amp; draggedItem.pageY >= position.top) {
      return true;
  }
  return false;
  

}