更新2

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）” 回调触发）。

$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）” 回调）

没有被解雇，我也不知道为什么，但这对我来说不是问题）

所以目的是我应该手动打电话

$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'），因为我不知道为什么 ondragend事件未触发

所以我从视图HTML中删除了它 ondragend =“ angular.element（this）.scope（）。ctrlendDragging（id）”

并从我的控制器 $ scope.ctrlendDragging（id）中手动调用，以通过$（'＃external-events'）停止时重置当前拖动的事件。on（'dragstop'，function（ evt）并处理了当前外部事件停止拖动并且不在本地事件上方进行本地化的情况通过

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

Working codePen

update2：

因为第一个解决方案是基本的并且可以在危险条件下工作它仅适用于第一个可拖动的锂这既不精确也不精确。我对以下内容进行了更新：

    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）的id 通过html视图 ondragstart =“ angular.element（this）.scope（）。ctrlstartDragging（id）”

2- $ scope.ctrlendDragging n.b：我通过设置z-index book.style.zIndex =“ 9999”; ，因此我们可以在模式上下文中工作

3- $（'＃external-events'）。on（'dragstop'，function（evt）应该在 $（document）.ready（function（）{或 $ window.load 在哪里添加了对li的positionX positionY所做的更改的监视组

$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（）{

拖动：function（）{以获取当前拖动的li元素的确切positionX positionY

$(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;

                  });

              }
});

Working codePen for li

希望这可能对某人有所帮助；）。

在日历div和外部事件全日历之间

更新2

1 个答案:

update2：