从fullcalendar删除元素（通过拖动到垃圾桶） [英] Remove Elements from fullcalendar (by dragging to trash can)
本文介绍了从fullcalendar删除元素（通过拖动到垃圾桶）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个fullcalendar，外部元素被拖拽到它上面。我对jquery比较陌生。我不知道如何获得被拖动的对象的ID到垃圾桶图标。我只是想将日历中的物品拖放到图像上，而当我放开鼠标时，物品将被移除。
这是我的代码.....
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp：// 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（）{
/ *初始化外部事件
--------- -------------------------------------------------- ------ * /
$（'＃external-events div.external-event'）。each（function（）{
//创建一个Event Object（http://arshaw.com/fullcalendar/docs/event_data/Event_Object/）
//它不需要开始或结束
var eventObject = {
title： $ .trim（$（this）.text（））//使用元素的文本作为事件标题
};
//将事件对象存储在DOM元素中，这样我们就可以稍后再讨论
$（this）.data（'eventObject'，eventObject）;
$ b $ //使用jQuery UI使事件可拖动
$（this）.draggable（{
zIndex：999，
revert：true，//将导致事件回到它的
revertDuration：0 //拖动
之后的原始位置}）;
}）;
/ *初始化日历
--------------------- -------------------------------------------- * /
$（'＃calendar'）。fullCalendar（{
header：{
left：'prev，next today'，
center：'title'，
right ：'month，agendaWeek，agendaDay'
}，
可编辑：true，
droppable：true，//这可以让事情落到日历上!!!
drop：函数（date，allDay）{//当某些东西被删除时调用这个函数
//检索被删除的元素存储的事件对象
var originalEventObject = $（this）.data（'eventObject '）;
//我们需要复制它，以便多个事件不会引用同一个对象
var copiedEventObject = $ .extend（{}，originalEventObject）;
//为其分配报告的日期
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
//在日历上呈现事件
//最后一个`true`参数确定事件是否粘住（http：// arshaw。 com / fullcalendar / docs / event_rendering / renderEvent /）
$（'＃calendar'）。fullCalendar（'renderEvent'，copiedEventObject，true）;
//是否勾选删除后删除复选框？
if（$（'＃drop-remove'）。is（'：checked'））{
//如果是，从Draggable Events列表中删除元素
$（此）卸下摆臂（）;
}
}
}）;
}）;
< / 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;
背景：#eee;
text-align：left;
}
＃external-events h4 {
font-size：16px;
margin-top：0;
padding-top：1em;
}
.external-event {/ *尝试模仿真实事件的外观* /
margin：10px 0;
padding：2px 4px;
背景：＃3366CC;
颜色：#fff;
font-size：.85em;
光标：指针;
}
＃external-events p {
margin：1.5em 0;
font-size：11px;
颜色：＃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>可拖曳事件< / h4>
< div class ='external-event'> even1< / div>
< div class ='external-event'> even2< / div>
< p>
< input type ='checkbox'id ='drop-remove'/> < label for ='drop-remove'>在删除后删除< / label>
< / p>
< / div>
< div id ='calendar'>< / div>
< img src =redmond / images / trash.pngid =垃圾桶>
< div style ='clear：both'>< / div>
< / div>
< / body>
< / html>
解决方案
完整教程，垃圾功能到fullcalendar
如果您不想在fullcalendar中使用droppable：
。 css删除此行
.fc-view
{
/ *防止拖出小部件* /
宽度：100％;
overflow：hidden;
}
在fullcalenar.js中找到（cca 6086行）
function eachEventElement（event，exceptElement，funcName）{
var elements = eventElementsByID [event._id]，
i，len = elements 。长度;
for（i = 0; i< len; i ++）{
if（！exceptElement || elements [i] [0]！= exceptElement [0]）{
elements [i] [了funcName]（）;
$ / code $ / pre
改为： p>
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：
//实际上光标位置
var currentMousePos = {
x：-1，$ b $通过：-1
};
//设置实际游标pos
jQuery（document）.ready（function（）{
jQuery（document）.on（mousemove，function事件）{
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
}）;
}）;
//检查游标是否在垃圾桶中
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）; （currentMousePos.x> = x1&& currentMousePos.x< = x2&&
currentMousePos.y> = y1&& currentMousePos.y）
< = y2）{
返回true;
}
返回false;
$ b $ // fullcalendar mouseover callback
$ b 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）;
$ b $ $
$ b $ p
$ b $ p 在fullcalendar设置选项dragRevertDuration ：0，
在fullcalendar声明中添加加载回调函数以附加一个trashcalendar：
load：function（bool）{
if（！bool）{
jQuery（'。fc-header-left'）。append（'< div id =calendarTrashclass = calendar-trash>< img src ='+ imagePath +'/cal-trash.png\"></img></div>'）;
$ b}，
垃圾的css： p>
div.calendar-trash {
float：left;
padding-right：8px;
margin-right：5px;
padding-left：8px;
padding-top：3px;
光标：指针;
}
.to-trash {
background-color：#EAEAEA;
-webkit-border-radius：5em;
border-radius：5em;
$ b 如果加载回调不起作用，请在jquery文档就绪函数结束时添加垃圾回收。
foo.JFS（'。fc-header-left'）。append（'< div id =calendarTrashclass =calendar-trash>< img src =/ images / cal-trash.png>< / img>< / div>'）;
垃圾桶图标：
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.
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>
解决方案 Complete tutorial, how to add "move to trash" function to fullcalendar
if you do not want to use droppable:
from fullcalendar.css delete this lines
.fc-view
{
/* prevents dragging outside of widget */
width: 100%;
overflow: hidden;
}
find in fullcalenar.js (line 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:
//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,
in fullcalendar declaration add loading callback function for append a 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 for trash:
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.
foo.JFS('.fc-header-left').append('<div id="calendarTrash" class="calendar-trash"><img src="/images/cal-trash.png"></img></div>');
trash icon:
这篇关于从fullcalendar删除元素（通过拖动到垃圾桶）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
