reseting (top left width css styles) for an external event in fullcalendar

Question

$scope.ctrlstartDragging = function(id) {

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

        };
        $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';
        };

when I clear the input search after a filter is applied on external events the last droped event into the calendar goes up to the top (as if $scope.ctrlstartDragging = function(id) is still applied immediately and automatically on it(the last droped event into the calendar).

to reproduce (link codePen at bottom):

1- drag and drop into the calendar event 4

2- look for 111 event from the input search

3- drag and drop into the calendar the 111 event found by the filter

4- clear the filter manually or by clicking on the clear button

as you can see the last droped into the calendar event 111 goes up to the top.

which should not to be it should be re-integrate within the list.

The ondragstart => $scope.ctrlstartDragging = function(id) still operating on that event and The ondragend => $scope.ctrlendDragging = function(id) is unfired.

and to see more the problem :

1- refresh the browser

2- uncheck Remove after a drag box

3- drag and drop any event into the calendar

as you can see the last droped event into the calendar goes up to the top of the external events box.

my question is how to fire ctrlendDragging and unset/reset (top left width css styles) of a book to revert to their first primary css styles before we operate any dragging or moving ?

codePen

related:

SO Q1 SO Q2

many thanks.

Answer 1

drop: function() {

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


                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                   $(this).remove();


                }
            }

I made that as a workaround but I didn't see why ondragend don't fire and hence don't triggers $scope.ctrlendDragging

Working CodePen