Между календарным div и внешними событиями fullcalendar

Question

Может кто-нибудь сказать мне, какой обратный вызов события fullcalendar я должен использовать Для обработки случая, когда: текущее внешнее событие перестало перетаскиваться, и оно локализовано не над внешними событиями. Поле или над Календарем ?

зная, что у меня есть оба метода isEventOverDiv // возвращает true / false, если мы (не) над внешними событиями, и isEventOverDivCal // возвращает true / false, если мы (не) по календарю

Я пыталсяв eventDragStop: функция (событие, jsEvent, пользовательский интерфейс, представление)

  eventDragStop: function (event, jsEvent, ui, view){

    // if the event is not over the external events box and neither over the calendar
    if(!isEventOverDiv(jsEvent.clientX, jsEvent.clientY) && !isEventOverDivCal(jsEvent.clientX, jsEvent.clientY) ) {
        // reset 
         var reccupuredIndexForTitle=$(this).attr('id');
         $scope.ctrlendDragging(reccupuredIndexForTitle);
    }

    }



    //return true if we are over the external events
    var isEventOverDiv = function (x, y) {

        var external_events = $('#external-events');
        var offset = external_events.offset();
        offset.right = external_events.width() + offset.left;
        offset.bottom = external_events.height() + offset.top;

        // Compare
        if (x >= offset.left &&
        y >= offset.top &&
        x <= offset.right &&
        y <= offset.bottom) {return true;}
        return false;

    };

    //return true if we are over the calendar
    var isEventOverDivCal = function(x, y) {
                var external_events = $( '#calendar' );
                var offset = external_events.offset();
                offset.right = external_events.width() + offset.left;
                offset.bottom = external_events.height() + offset.top;

                // Compare
                if (x >= offset.left
                    && y >= offset.top
                    && x <= offset.right
                    && y <= offset .bottom) { return true;}
                return false;
    }

, но она не работает.

обновление 2

для того, чтобыпреодолеть препятствие для размещения событий над виртуальной полосой прокрутки во время их поездки в календарь

1 - я применяю из mycontroller $ scope.ctrlstartDragging (который запускается из представления HTML на ondragstart = "angular.element (this) .scope (). ctrlstartDragging (id)" * callback).

$scope.ctrlstartDragging = function(id) {

        var book = document.getElementById(id);
        var domRect = absolutePosition(book);
            book.style.position = 'fixed';
            book.style.top = domRect.top + 'px';
            book.style.left = domRect.left + 'px';
            book.style.width=(domRect.width) + 'px';

    };

и возможность сброса стилей CSS (позиция в верхнем левом углу)

(NB: ondragend = "angular.element (this) .scope (). CtrlendDragging (id)" callback)

не запускается, и я не знаю почему, нов моем случае это не проблема)

, поэтому я должен вручную

$scope.ctrlendDragging = function(id) {

   var book = document.getElementById(id);
        book.style.position = 'relative';
        book.style.top = 'unset';
        book.style.left = 'unset';
        book.style.width='unset';
};  

и делать, как я уже сказал, в случае, если пользователь прерывает установку события накалендарь во время перетаскивания, и это событие позиционируется как вне поля внешних событий, так и вне календаря.

, но в моем случае см. MyPlunk Мне нужно, когда применяется возврат, мне нужно будет во времяВозврат этого события во внешнее окно событий для вызова его с помощью следующего:

 // reset 
 var reccupuredIndexForTitle=$(this).attr('id');
 $scope.ctrlendDragging(reccupuredIndexForTitle);

, поэтому мне нужно, когда применяется возврат, я должен применить эти две строки, потому что, если они не применяются, когдапользователь прервет перетаскивание в календарь события, которое вернулось, но без отмененных стилей CSS, примененных к ширине верхнего угла .style.position. Я бы получил одно изолированное внешнее событие в верхней части окна внешних событий, как показанониже:

Большое спасибо.

Answer 1

добавил следующее в мой контроллер:

    var x =-1;
    var y=-1;
    $('#external-events').on('dragstop', function(evt) 
    {

            isDragging = false;
            x = evt.originalEvent.pageX;
            y = evt.originalEvent.pageY;
            if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) )               
            {
                     // reset 
                     var reccupuredIndexForTitle=$('.fc-event').attr('id');
                     $scope.ctrlendDragging(reccupuredIndexForTitle);
            }

    }); 

Как вы можете видеть из кода, я использовал jquery on ('dragstop') , потому что я не знаю, почему onСобытие ondragend не вызывается

, поэтому я удалил его из вида HTML ondragend = "angular.element (this) .scope (). ctrlendDragging (id)"

и вызвал manualy из моего контроллера $ scope.ctrlendDragging (id) , чтобы сбросить текущее перетаскиваемое событие, когда оно остановлено с помощью $ ('# external-events'). on ('dragstop', function (evt) и обработанослучай, когда текущее внешнее событие перестало перетаскиваться, и оно локализовано не над внешними событиями. Поле или над Календарем через

if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) ) 

Рабочий кодPen

update2:

Потому что первое решение является базовым и работает в опасных условиях. Оно работает только для первого перетаскиваемого кода li, оно не является ни точным, ни точным. Я сделал следующее обновление:

    var domRect;
    var isDragging = false;
    var x =-1;
    var y=-1;
    $scope.positionX =-1;
    $scope.positionY=-1;    

    var myId=-1;

    $(document).ready(function() {
        $scope.ctrlstartDragging = function(id) {
               myId = id;
        };


        $scope.ctrlendDragging = function(id) {

           book.style.zIndex = "9999";

        };  




        $('#external-events').on('dragstop', function(evt)
        {  

           $scope.$watchGroup(['positionX','positionY'],function () {
                  x = $scope.positionX;
                  y = $scope.positionY;

           });

           if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) )      {
                         // reset 
                         var reccupuredIndexForTitle=myId;
                         $scope.ctrlendDragging(reccupuredIndexForTitle);
           } 

        });

});//end of $(document).ready(function()

Заключено в $ (document) .ready (function () { все функции, которыеПодлежит применению в готовом документе:

1- $ scope.ctrlstartDragging , из которого мы получаем myId, равный (текущий li) идентификатор, переданный через представление html ondragstart = "angular.element (this) .scope (). ctrlstartDragging (id) "

2- $ scope.ctrlendDragging nb: я устанавливаю z-индекс с помощью book.style.zIndex= "9999"; , чтобы мы могли работать в модальном контексте

3- $ ('# external-events'). On ('dragstop', функция (evt) это должно работать в $ (document) .ready (function () { или $ window.load , где добавлена ​​группа наблюдения за изменениями, внесенными в positionX positionY li

$scope.$watchGroup(['positionX','positionY'],function () {
                  x = $scope.positionX;
                  y = $scope.positionY;

});

также добавлено

if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) )      {
                                 // reset 
                                 var reccupuredIndexForTitle=myId;
                                 $scope.ctrlendDragging(reccupuredIndexForTitle);
               } 

, которые на этот раз работают с myId, полученным от $ scope.ctrlstartDragging

С другой стороны, Я добавил при инициализации внешних событий

$ ('# external-events .fc-event'). Each (function () {

drag: function() {, чтобы получить точное положениеX позицияYдля текущего перетаскиваемого элемента li

$(this).draggable({
              zIndex: 999,
              revert: true,      // will cause the event to go back to its
              revertDuration: 0,  //  original position after the drag
      drag: function(){
                  var offset = $(this).offset();
                  var xPos = offset.left;
                  var yPos = offset.top;

                  $scope.$apply(function() {

                    $scope.positionX =xPos;
                    $scope.positionY = yPos;

                  });

              }
});

Рабочий codePen для li

Надеюсь, это может кому-нибудь помочь;).