为全日历中的外部事件重置（左上角宽度 css 样式）

Posted 2023-03-06

【中文标题】为全日历中的外部事件重置（左上角宽度 css 样式）

【英文标题】：reseting (top left width css styles) for an external event in fullcalendar

【发布时间】：2019-06-25 12:32:47

【问题描述】：

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

当我在对外部事件应用过滤器后清除输入搜索时 最后一个放入日历的事件上升到顶部（好像 $scope.ctrlstartDragging = function(id) 仍然立即自动应用它（最后一个放入日历的事件）。

复制（链接codePen在底部）：

1- 拖放到日历事件中 4

2- 从输入搜索中查找 111 事件

3-将过滤​​器找到的111事件拖放到日历中

4- 手动清除过滤器或单击清除按钮

如您所见，最后放入日历的事件 111 上升到顶部。

不应该的应该重新整合到列表中。

ondragstart => $scope.ctrlstartDragging = function(id) 仍在该事件上运行，并且 ondragend => $scope.ctrlendDragging = function(id) 未触发。

并查看更多问题：

1- 刷新浏览器

2- 取消选中拖动框后删除

3- 将任何事件拖放到日历中

如您所见，最后放入日历的事件会上升到外部事件框的顶部。

我的问题是如何在我们操作任何拖动或移动之前触发 ctrlendDragging 和取消设置/重置（左上角宽度 css 样式）一本书以恢复到它们的第一个主要 css 样式？

codePen

相关：

SO Q1 SO Q2

非常感谢。

【参考方案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();


                
            

我将其作为一种解决方法，但我不明白为什么 ondragend 不会触发，因此不会触发 $scope.ctrlendDragging

Working CodePen