Remove Elements from fullcalendar (by dragging to trash can)_问答_开发者

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:开发者_StackOverflow中文版 #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

Remove Elements from fullcalendar (by dragging to trash can)

HERE IS DEMO

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:

Remove Elements from fullcalendar (by dragging to trash can)

first of all you're gonna need to remove overflow statement from css:

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

then you can use eventDragStop

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.

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

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 :

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;

}

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

        }
    }