Question

我有这段代码：

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

但我被困在那里。我希望能够将事件拖到类名为“event-delete”的div上，并删除该事件。

我已经尝试了几种方法来识别事件是否被拖过删除div无效。上面的解决方案似乎部分起作用。事件触发器正在工作，但冻结了任何拖动的元素。

Answer 1

只需自定义此项并将其投入您的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 ];
        },

Answer 2

我使用fullcalendar已经有一段时间了，但是如果我记得正确的ui可以让你访问被拖动的实际元素，对吗？如果是这种情况，那么你可以获得被拖动元素的坐标和删除div的坐标，并检查它们是否在彼此之内。

jQuery通过.offset()授予对相对于页面的坐标的访问权限。 coords仅提供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的内容，以获得对元素的实际引用。

Answer 3

这个答案是基于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;
    }

它对我来说很完美！

非常感谢T.Stone的主导思想：）

Answer 4

我已更新外部拖动演示，并将代码发布到http://code.google.com/p/fullcalendar/issues/detail?id=550上的评论中。希望它有所帮助。

该代码允许将事件拖离日历并返回日历。

我正在使用Chrome进行测试。

Answer 5

我告诉你drop：function（event，ui） ui :: ui包含一个空对象。在2.1版之前，jQuery UI对象。 :) 然后工作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;

}

通过拖动删除jQuery FullCalendar事件

5 个答案: