Fullcalendar - delete event by drag on touch device

Question

I have an issue with Fullcalendar 3.9.0.

eventDragStop: function (event, jsEvent, ui, view) {
         if (isElemOverDiv()) {
             var con = confirm('Are you sure?');
             if (con == true) {
                 $.ajax({
                     url: 'process.php',
                     data: 'type=remove&eventid=' + event.id,
                     type: 'POST',
                     dataType: 'json',
                     success: function (response) {
                         console.log(response);
                         if (response.status == 'success') {

$('#calendar').fullCalendar('removeEvents');
                                 getFreshEvents();
                             }
                         },
                         error: function (e) {
                             alert('Error processing your request: ' + e.responseText);
                         }
                     });
                 }
             }
         }

function isElemOverDiv() {
     var trashEl = jQuery('#external-events');

     var ofs = trashEl.offset();

     var x1 = ofs.left;
     var x2 = ofs.left + trashEl.outerWidth(true);
     var y1 = ofs.top;
     var y2 = ofs.top + trashEl.outerHeight(true);

     if (currentMousePos.x >= x1 && currentMousePos.x <= x2 &&
                            currentMousePos.y >= y1 && currentMousePos.y <= y2) {
         return true;
     }
     return false;
 }

I use the above code to be able to pick up a calendar event and move it to a trash can, deleting the event. However, this doesn't work properly on touch devices.

I can drag the event just fine, but moving it to the trash and letting go doesn't work. However, if I drag it to the trash, let go and immediately click on the trash, the event will be deleted.

Answer 1

I don't know your variable "currentMousePos". But if i haven't mistake, i have a idea for your problem. In html5, you can't get a position for the touch device by jsEvent.pageX. One idea is to use jsEvent.changedTouches[0].clientX. This is the position of the last finger you left the screen.

var currentMousePos = new Object();
if (jsEvent.type === 'touchend') {
    currentMousePos.x = jsEvent.changedTouches[0].clientX;
    currentMousePos.y = jsEvent.changedTouches[0].clientY;
} else {
    currentMousePos.x = jsEvent.pageX;
    currentMousePos.y = jsEvent.pageY;
}

Hope this helps.