html拖拽垃圾桶,javascript – 从fullcalendar中删除元素(通过拖动到垃圾桶)

完整的教程,如何添加“移至垃圾桶”功能到fullcalendar

如果不想使用droppable：

从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

if (!exceptElement || elements[i][0] != exceptElement[0]) {

elements[i][funcName]();

}

}

}

并更改为：

function eachEventElement(event,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('

');

垃圾图标：