Supprimer les éléments de fullcalendar (en les faisant glisser vers la corbeille)
J'ai un fullcalendar avec des éléments extérieurs glissé sur. Je suis relativement nouveau à jquery. Je ne sais pas trop comment faire pour obtenir l'ID de l'objet déplacé à une icône "poubelle". Je veux simplement faire glisser des éléments de l'agenda pour une image et quand je passe la souris l'élément est supprimé.
C'est mon 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>
source d'informationauteur John
Vous devez vous connecter pour publier un commentaire.
Tutoriel complet, comment ajouter "déplacer dans la corbeille" la fonction de fullcalendar
VOICI LA DÉMO
si vous ne souhaitez pas utiliser drop:
de fullcalendar.css supprimer ces lignes
trouver dans fullcalenar.js (ligne cca 6086)
et changement:
en js:
dans fullcalendar option set dragRevertDuration: 0,
dans fullcalendar de la déclaration de chargement de fonction de rappel pour ajouter un trashcalendar:
css pour les poubelles:
Si le chargement de rappel ne fonctionne pas, ajouter la corbeille sur la fin de jquery document prêt de la fonction.
icône de la corbeille:
tout d'abord, vous allez avoir besoin de retirer de débordement de la déclaration de css:
ensuite, vous pouvez utiliser eventDragStop
ici est quelque chose j'ai juste fait j'espère que ça aide. Je ne sais pas si vous utilisez php/mysql, mais si vous n'êtes pas tout simplement supprimer l'appel ajax et garder ce qui est dans la réussite de la fonction.
je dis nous drop: function(event, ui) ui :: l'interface utilisateur est titulaire d'un objet vide. Avant la version 2.1, le jQuery UI objet. 🙂 et puis jsEvent 🙂 sn :