javascript 从全日历中删除元素（通过拖动到垃圾桶）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3470154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove Elements from fullcalendar (by dragging to trash can)
提问by John
I have a fullcalendar with external elements being dragged onto it. I'm relatively new to jquery. I don't know quite how to get the ID of the object being dragged to a "trash can" icon. I simply want to drag items off of the calendar to a image and when I let go of the mouse the item is removed.
我有一个完整的日历，外部元素被拖到它上面。我对 jquery 比较陌生。我不太清楚如何获得被拖动到“垃圾桶”图标的对象的 ID。我只是想将日历中的项目拖到图像上，当我松开鼠标时，项目将被删除。
This is my code.....
这是我的代码......
<!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>
回答by eXistPierre
Complete tutorial, how to add "move to trash" function to fullcalendar
完整教程，如何为fullcalendar添加“移至垃圾箱”功能
if you do not want to use droppable:
如果您不想使用 droppable：
from fullcalendar.css delete this lines
从 fullcalendar.css 中删除这一行
.fc-view
{
/* prevents dragging outside of widget */
width: 100%;
overflow: hidden;
}
find in fullcalenar.js (line cca 6086)
在 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]();
}
}
}
and change to:
并更改为：
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]();
}
}
}
}
in js:
在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");
}
}
},
in fullcalendar set option dragRevertDuration: 0,
在 fullcalendar 设置选项 dragRevertDuration: 0,
in fullcalendar declaration add loading callback function for append a trashcalendar:
在 fullcalendar 声明中添加加载回调函数以追加垃圾日历：
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 for trash:
垃圾的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;
}
If loading callback not working, add trash on end of jquery document ready function.
如果加载回调不起作用，请在 jquery 文档就绪函数的末尾添加垃圾。
foo.JFS('.fc-header-left').append('<div id="calendarTrash" class="calendar-trash"><img src="/images/cal-trash.png"></img></div>');
trash icon:
垃圾桶图标：
回答by iLemming
first of all you're gonna need to remove overflow statement from css:
首先，您需要从 css 中删除溢出语句：
.fc-view
{
/* prevents dragging outside of widget */
width: 100%;
overflow: hidden;
}
then you can use eventDragStop
那么你可以使用eventDragStop
回答by Drew Calder
here is something I just did hope it helps. I dont know if you are using php/mysql but if your not just remove the ajax call and keep what is in the success function.
这是我确实希望它有所帮助的东西。我不知道您是否正在使用 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 ];
},
回答by Gus Ch
i tell us drop: function(event, ui) ui :: ui holds an empty object. Before version 2.1, the jQuery UI object. :) and work then jsEvent :) sn :
我告诉我们 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;
}
回答by Abdoulayebacary
<div id="calendarTrash" class="calendar-trash"><img src="images\trash.png" alt="image"/></div>
` eventDragStop: function(event,jsEvent) {
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 (jsEvent.pageX >= x1 && jsEvent.pageX<= x2 &&
jsEvent.pageY >= y1 && jsEvent.pageY <= y2) {
if (confirm("Are you sure to detete " + event.title +" ?")) {
//pour annuker les informations
$('#external-calendar').fullCalendar('removeEvents', event._id);
}
}
}
