Question

我正在使用Smart Admin Theme，我在主题日历中安装了一个垃圾桶图标。

CSS：

.fc-view
{
    width: 100%;
    overflow: visible;
}

HTML：

<div class="well well-sm" id="deleteEventsDiv">
    <legend>
        Delete Events
    </legend>
    <img src="/img/avatars/cal-trash.png">
    <div class="note">
        <strong>Note:</strong> Drag and drop events here to delete them
    </div>
</div>

Javascript（来自fullcalendar本身的eventDragStop方法）：

eventDragStop: function( event, jsEvent, ui, view, removeEvents ) {
    // This condition makes it easier to test if the event is over the trash can using Jquery
    if($('div#deleteEventsDiv').is(':hover')){
        // Confirmation popup
        $.SmartMessageBox({
            title : "Delete Event?",
            content : 'Are you sure you want to remove this event from the calender?',
            buttons : '[No][Yes]'
        }, function(ButtonPressed) {
            if (ButtonPressed === "Yes") {

                // You can change the URL and other details to your liking.
                // On success a small box notification will fire
                $.ajax({
                    url: '/events/' + event.id,
                    type: 'DELETE',
                    success: function(request) {
                        $.smallBox({
                            title : "Deleting Event",
                            content : "Event Deleted",
                            color : "#659265",
                            iconSmall : "fa fa-check fa-2x fadeInRight animated",
                            timeout : 4000
                        });
                        $('#calendar').fullCalendar('removeEvents', event.id);
                    }
                });
            }
        });
    }
},

这很好用。当用户在拖拽停止时悬停在垃圾桶上时，会出现确认弹出窗口，并且会在“是”上触发ajax调用。

现在我想在鼠标结束时突出显示div。所以我使用了eventDragStart方法，如下所示：

eventDragStart: function( event, jsEvent, ui, view ) {
    $('div#deleteEventsDiv').mouseover(function(e){
        $(this).css({'background-color': '#A90329'});

        $('div#deleteEventsDiv').mouseout(function(){
            $(this).css({'background-color': 'white'});
        });
    });
},

但是每当我将事件悬停在div上时，它会变成红色只有几分之一秒才会变回白色。为什么会这样？我该如何纠正这个？

如果我删除mouseout回调，则会变为红色。这是怎么回事？

如何在将fullcalendar事件拖到它时突出显示div？

0 个答案: