Return to Answer

Hope it may help sombedy else ;).

Hope it may help somebody ;).

$scope.$watchGroup(['positionX','positionY'],function () {
                          x = $scope.positionX;
                          y = $scope.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;
                                
                  });
      
              }
});

Because The first solution is basic and work in hazardous conditions It works only for the first draggable li and it's not exact nor precise. I made an update to the following:

$scope.$watchGroup(['positionX','positionY'],function () {
                  x = $scope.positionX;
                  y = $scope.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;
                                
                  });
      
              }
});

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()

Enclosed in $(document).ready(function() { all functions that shoul be appplied in document ready:

1- $scope.ctrlstartDragging from which we get myId equal (current li) id passed via html view ondragstart="angular.element(this).scope().ctrlstartDragging(id)"

2- $scope.ctrlendDragging n.b : I set the z-index via book.style.zIndex = "9999"; so we could work in a modal context

3- $('#external-events').on('dragstop', function(evt) that should work in $(document).ready(function() { or $window.load where added a watchgroup on changes made on positionX positionY of an li

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

also added

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

which work with myId this time gotten from $scope.ctrlstartDragging

On the other Hand, I added when initialising external events

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

drag: function(){ to get the exact positionX positionY for the current dragged li element

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

Hope it may help sombedy else ;).