從fullcalendar中刪除元素（通過拖動到垃圾桶）

我有一個fullcalendar，並將外部元素拖到它上面。我對jquery比較陌生。我不知道如何獲得被拖動的對象的ID到「垃圾桶」圖標。我只是想將日曆中的物品拖放到圖像上，而當我放開鼠標時，物品將被移除。從fullcalendar中刪除元素（通過拖動到垃圾桶）

這是我的代碼.....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' /> 
<script type='text/javascript' src='../jquery/jquery.js'></script> 
<script type='text/javascript' src='../jquery/jquery-ui-custom.js'></script> 
<script type='text/javascript' src='../fullcalendar.min.js'></script> 
<script type='text/javascript'> 

    $(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(); 

       } 
      } 

     }); 

    }); 

</script> 
<style type='text/css'> 

    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; 
     } 

</style> 
</head> 
<body> 
<div id='wrap'> 

<div id='external-events'> 
<h4>Draggable Events</h4> 
<div class='external-event'>even1</div> 
<div class='external-event'>even2</div> 

<p> 
<input type='checkbox' id='drop-remove' /> <label for='drop-remove'>remove after drop</label> 
</p> 
</div> 

<div id='calendar'></div> 

<img src="redmond/images/trash.png" id="trash"> 

<div style='clear:both'></div> 
</div> 
</body> 
</html>

來源

2010-08-12 John

我試圖完成同樣的事情。我已經嘗試了Agzam的建議，並且確實允許您將項目從日曆中拖出，但我似乎無法弄清楚爲了觸發刪除事件，檢測此行爲的「正常」方式正確。 – Dutchie432 2011-07-21 14:51:39

首先你會需要從CSS刪除溢出聲明：

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

那麼你可以使用eventDragStop

來源

2011-03-30 15:53:01 Agzam

這裏是我只是希望它有幫助。我不知道你是否使用php/mysql，但如果你不只是刪除ajax調用，並保持成功的功能。

 $('#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 ]; 
     },

來源

2011-08-05 18:12:38

什麼是「拖」？ – MarcoS 2013-10-09 13:15:59

來自日曆的事件。 – 2013-10-23 05:52:09

好吧，它已經很長一段時間，但如果找到了代碼。我將編輯帖子，但它正在做什麼只是將數組中所需的不同組件存儲起來。 – 2013-10-23 06:03:53

完整的教程，如何增加「移動到回收站」功能fullcalendar

enter image description here

HERE IS DEMO

，如果你不想用可棄：

from fullcalendar.css刪除此行

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

找到fullcalenar.js（CCA線6086）

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

，並更改爲：

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('<div id="calendarTrash" class="calendar-trash"><img src="' + imagePath + '/cal-trash.png"></img></div>'); 

    } 
},

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('<div id="calendarTrash" class="calendar-trash"><img src="/images/cal-trash.png"></img></div>');

垃圾桶圖標：

enter image description here

來源

2013-08-15 13:28:24 eXistPierre

優秀的答案！ +1 – 2013-12-16 13:09:36

從fullcalendar中刪除元素（通過拖動到垃圾桶）

回答

相關問題