fullcalendar eventDragStop在事件返回到原始位置後觸發

我想通過將fullcalendar jquery插件上的事件拖放到垃圾桶圖像並將它們放入來刪除它們。有幾篇文章討論此操作，但我無法看到讓我的工作。的垃圾桶圖像在下面的CSHTML定義：fullcalendar eventDragStop在事件返回到原始位置後觸發

<div class="well well-sm" id="deleteEventsDiv" style="text-align:center"> 
    <label id="delete_events_lbl" style="display:block; text-align:center; font-size:medium; font-weight:bold">Delete Events</label> 

    <img src="~/Images/cal-trash.png"> 
    <div class="note"> 
     <strong>Note:</strong> Drag and drop events here to delete them 
    </div> 
</div>

我可以將事件拖到垃圾桶，但它恢復到原來的位置，則eventDragStop事件被觸發。由於它沒有通過垃圾箱，其餘的代碼不會運行。這是我的fullcalendar代碼：

$('#edit_calendar').fullCalendar({ 
header: 
{ 
    left: 'prev,next today', 
    center: 'title', 
    right: 'month,agendaWeek,agendaDay' 
}, 
titleFormat: { month: 'MMMM' }, 
defaultView: 'month', 
selectable: true, 
selectHelper: true, 
droppable: true, 
drop: function (date, jsEvent, ui, resourceId) {  
    var memberName = $(this).data('event').title; 
    var memberID = $(this).attr('id').toString(); 
    //Create Event - add to array 
    var newEvent = new Object(); 
    newEvent = { 
     title: memberName, 
     id: memberID, 
     start: date.format(), 
     end: date.format(), 
     objectID: 0 
    }; 
    eventsAdded.push(newEvent); 
}, 
editable: true, 
//The following constraints prevents the user from adding/updating/deleting events that are before the current date 
//The end date is required. So, you can't add events over a year away from the current date 
eventConstraint: { 
    start: moment().startOf('day'), 
    end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365) 
}, 
selectConstraint: { 
    start: moment().startOf('day'), 
    end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365) 
}, 
resizable: true, 
dragRevertDuration: 0, 
eventDragStop: function (event, jsEvent, ui, view) { 
    alert('event drag stopped...should be over trash can.'); 
    // This condition makes it easier to test if the event is over the trash can using Jquery 
    if ($('div#deleteEventsDiv').is(':hover')) { 
     // Confirmation popup 
     $.SmartMessageBox({ 
      title: "Delete Event?", 
      content: 'Are you sure you want to remove this event from the calender?', 
      buttons: '[No][Yes]' 
     }, function (ButtonPressed) { 
      if (ButtonPressed === "Yes") { 

       // You can change the URL and other details to your liking. 
       // On success a small box notification will fire 
       $.ajax({ 
        url: '/events/' + event.id, 
        type: 'DELETE', 
        success: function (request) { 
         $.smallBox({ 
          title: "Deleting Event", 
          content: "Event Deleted", 
          color: "#659265", 
          iconSmall: "fa fa-check fa-2x fadeInRight animated", 
          timeout: 4000 
         }); 
         $('#edit_calendar').fullCalendar('removeEvents', event.id); 
        } 
       }); 
      } 
     }); 
    } 
} 
}); //end calendar initialization

如何從不回到原來的位置，當它是垃圾桶？

來源

2016-05-24 Gloria Santin

我在這裏有同樣的問題。我發現了一個古老的解決方案。

我希望它也適合你。

打開fullcalendar.js並編輯：

dragRevertDuration: 500

到

dragRevertDuration: 0

來源

2016-07-24 21:01:15

fullcalendar eventDragStop在事件返回到原始位置後觸發

回答

相關問題