从fullcalendar中删除元素（通过拖动到垃圾桶）

我有一个fullcalendar，外部元素被拖到它上面。 我对jquery比较新。 我不知道如何将被拖动对象的ID转换为“垃圾桶”图标。 我只想将日历中的项目拖到图像上，当我松开鼠标时，项目被删除。

这是我的代码…..

        $(document).ready(function() { /* initialize the external events -----------------------------------------------------------------*/ $('#external-events div.external-event').each(function() { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn't need to have a start or end var eventObject = { title: $.trim($(this).text()) // use the element's text as the event title }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // make the event draggable using jQuery UI $(this).draggable({ zIndex: 999, revert: true, // will cause the event to go back to its revertDuration: 0 // original position after the drag }); }); /* initialize the calendar -----------------------------------------------------------------*/ $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, droppable: true, // this allows things to be dropped onto the calendar !!! drop: function(date, allDay) { // this function is called when something is dropped // retrieve the dropped element's stored Event Object var originalEventObject = $(this).data('eventObject'); // we need to copy it, so that multiple events don't have a reference to the same object var copiedEventObject = $.extend({}, originalEventObject); // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); // is the "remove after drop" checkbox checked? if ($('#drop-remove').is(':checked')) { // if so, remove the element from the "Draggable Events" list $(this).remove(); } } }); });   body { margin-top: 40px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #wrap { width: 1100px; margin: 0 auto; } #external-events { float: left; width: 150px; padding: 0 10px; border: 1px solid #ccc; background: #eee; text-align: left; } #external-events h4 { font-size: 16px; margin-top: 0; padding-top: 1em; } .external-event { /* try to mimick the look of a real event */ margin: 10px 0; padding: 2px 4px; background: #3366CC; color: #fff; font-size: .85em; cursor: pointer; } #external-events p { margin: 1.5em 0; font-size: 11px; color: #666; } #external-events p input { margin: 0; vertical-align: middle; } #calendar { float: right; width: 900px; }    
 
 
Draggable Events
 
even1
 
even2
 
  remove after drop 
 
 
  
 
   

Answer 1

完整教程，如何将“移动到垃圾箱”function添加到fullcalendar

这里是演示

如果你不想使用droppable：

来自fullcalendar.css删除这一行

 .fc-view { /* prevents dragging outside of widget */ width: 100%; overflow: hidden; } 

在fullcalenar.js中找到（line cca 6086）

 function eachEventElement(event, exceptElement, funcName) { var elements = eventElementsByID[event._id], i, len = elements.length; for (i=0; i 

并改为：

 function eachEventElement(event, exceptElement, funcName) { var elements = eventElementsByID[event._id], i; if (elements != null) { var len = elements.length; for (i = 0; i < len; i++) { if (!exceptElement || elements[i][0] != exceptElement[0]) { elements[i][funcName](); } } } } 

在js中：

 //actually cursor position var currentMousePos = { x: -1, y: -1 }; //set actually cursor pos jQuery(document).ready(function () { jQuery(document).on("mousemove", function (event) { currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); }); //check if cursor is in trash function isElemOverDiv() { var trashEl = jQuery('#calendarTrash'); 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; } //fullcalendar mouseover callback eventMouseover: function (event, jsEvent) { $(this).mousemove(function (e) { var trashEl = jQuery('#calendarTrash'); if (isElemOverDiv()) { if (!trashEl.hasClass("to-trash")) { trashEl.addClass("to-trash"); } } else { if (trashEl.hasClass("to-trash")) { trashEl.removeClass("to-trash"); } } }); }, //fullcalendar eventdragstop callback eventDragStop: function (event, jsEvent, ui, view) { if (isElemOverDiv()) { jQuery('#fr-calendar').fullCalendar('removeEvents', event.id); var trashEl = jQuery('#calendarTrash'); if (trashEl.hasClass("to-trash")) { trashEl.removeClass("to-trash"); } } }, 

在fullcalendar中设置选项dragRevertDuration：0，

在fullcalendar声明中添加加载回调函数以附加trashcalendar：

 loading: function (bool) { if (!bool) { jQuery('.fc-header-left').append('
'); } }, 

垃圾css：

 div.calendar-trash{ float: left; padding-right: 8px; margin-right:5px; padding-left:8px; padding-top: 3px; cursor: pointer; } .to-trash{ background-color:#EAEAEA; -webkit-border-radius: 5em; border-radius: 5em; } 

如果加载回调不起作用，请在jquery文档就绪函数的末尾添加垃圾。

 foo.JFS('.fc-header-left').append('
'); 

垃圾图标：

Answer 2

首先，你需要从css中删除溢出语句：

  .fc-view { /* prevents dragging outside of widget */ width: 100%; overflow: hidden; } 

然后你可以使用eventDragStop

Answer 3

这是我刚才希望它有所帮助的东西。 我不知道你是否使用php / mysql，但如果你不只是删除ajax调用并保留成功函数中的内容。

  $('#calendar').children('.fc-content').children().append('
'); //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 4

我告诉我们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; }