Fullcalendar - 通过在触摸设备上拖动删除事件

Posted 2023-05-08

【中文标题】Fullcalendar - 通过在触摸设备上拖动删除事件

【英文标题】：Fullcalendar - delete event by drag on touch device

【发布时间】：2018-09-15 06:08:04

【问题描述】：

我对 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;
 

我使用上面的代码来获取日历事件并将其移动到垃圾箱，从而删除该事件。但是，这在触控设备上无法正常工作。

我可以很好地拖动事件，但是将它移到垃圾箱并放手是行不通的。 但是，如果我将它拖到垃圾箱，松开并立即点击垃圾箱，该事件将被删除。

【参考方案1】：

我不知道你的变量“currentMousePos”。但是，如果我没有弄错，我对您的问题有一个想法。在 html5 中，您无法通过jsEvent.pageX 获取触摸设备的位置。一种想法是使用jsEvent.changedTouches[0].clientX。这是您离开屏幕的最后一根手指的位置。

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;

希望这会有所帮助。