开发者

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

        }
    }

继续阅读：fullcalendarjavascriptjquery

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9