在開發應用的過程中,想要使得窗口在普通大小可以拖動,經常會設置該css屬性:-webkit-app-region: drag;
但是設置了這個屬性后,發現雙擊全屏和 restore size 等功能又廢了,包括鼠標樣式等等,實際上加了該屬性就觸發不了鼠標的相關事件。
通過搜索不難發現,有如下方案:
1、拖動不要用 -webkit-app-region 了,自己監聽 mouseDown 和 mouseUp 來實現吧
2、父元素設置 -webkit-app-region: drag, 子元素 -webkit-app-region: no-drag 即可
但是,想想在實際開發過程中有點特殊的情況,即:要實現拖拽和雙擊放大/縮小的所著元素為同一個 DOM
解決方案:
在宿主 Dom 中嵌套一個等寬,等高,但設置了-webkit-app-region: no-drag 屬性的 div 即可,上代碼:
<!-- 拖拽使用 -->
<div [ngClass]="{'title-bar__drag': !isMax}">
<div style="-webkit-app-region: no-drag; width: 100%;height: 100%"></div>
</div>