$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';
};
After applying a filter to the external events search input, a strange behavior occurs where the last dropped event in the calendar unexpectedly moves to the top as if the drag and drop function is automatically re-applied. This issue is causing confusion and disruption to the expected behavior of the events in the calendar.
To reproduce the issue, follow these steps:
1. Drag and drop event 4 into the calendar
2. Search for event 111 using the input search
3. Drag and drop event 111 from the filtered results into the calendar
4. Clear the filter either manually or by using the clear button
Upon clearing the filter, the last dropped event (event 111) moves to the top of the calendar instead of remaining integrated within the event list.
The issue seems to be related to the drag and drop function not properly resetting after clearing the filter, causing the last dropped event to behave unexpectedly.
To further demonstrate the problem:
1. Refresh the browser
2. Uncheck the "Remove after a drag" option
3. Drag and drop any event into the calendar
After following these steps, you will notice that the last dropped event in the calendar moves to the top of the external events box.
My question is how can we properly fire the ctrlendDragging function to unset/reset the top, left, and width CSS styles of a book element, reverting it to its initial state before any dragging or moving operations?
View the codePen for reference
Related inquiries:
Stack Overflow Question 1 Stack Overflow Question 2
Thank you for your assistance in resolving this issue.