腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

electron 無邊框窗口拖拽移動問題及解決辦法

更新時間：2023年12月22日 15:22:18 作者：IT老大哥

在做一款uTools的插件,懸浮文本,窗口是沒有標(biāo)題欄的,所以需要找一個地方可以拖動移動位置,本文給大家介紹electron 無邊框窗口拖拽移動問題及解決辦法,感興趣的朋友一起看看吧

electron 無邊框窗口拖拽移動問題記錄及解決辦法

在做一款uTools的插件,懸浮文本

窗口是沒有標(biāo)題欄的,所以需要找一個地方可以拖動移動位置

就開始了接下來的踩坑記錄

項(xiàng)目結(jié)構(gòu)

只是一個簡單的容器元素,一個多行文本框

容器元素加一個內(nèi)邊距,然后這個內(nèi)邊距區(qū)域就是我理想的可拖動位置

<body>
  <div id="container">
    <textarea id="content" spellcheck="false"></textarea>
  </div>
</body>

實(shí)現(xiàn)流程

webkit-app-region

首個版本,我采用CSS很簡單便實(shí)現(xiàn)了

當(dāng)時是用 Mac 開發(fā)測試的,一切運(yùn)行良好

#container {
	-webkit-app-region: drag;
	padding: 10px;
	cursor: move;
}

隔天到 Win 上看效果

發(fā)現(xiàn)拖動雖然正常,但是光標(biāo)樣式?jīng)]有了

鼠標(biāo)放在邊框位置不會變成移動的光標(biāo)

經(jīng)查閱,設(shè)置了-webkit-app-region: drag;的元素,不會在響應(yīng)鼠標(biāo)事件了(mac上測試的時候正常的)

so,需要繼續(xù)改了

鼠標(biāo)事件

沒有簡便辦法了,就只好自己寫個鼠標(biāo)拖拽事件了

按下記錄下鼠標(biāo)相對于窗口的位置

鼠標(biāo)移動后計(jì)算出窗口新的位置

窗口新位置=窗口當(dāng)前位置+鼠標(biāo)新的相對位置-鼠標(biāo)原來的相對位置

主進(jìn)程 (因?yàn)槭?code>uTools插件開發(fā),和electron原始代碼的監(jiān)聽不一樣)

ipcRenderer.on('move', (event, x, y) => {
  ubWindow.setPosition(x, y)
})
// 初始化
ipcRenderer.sendTo(ubWindow.webContents.id, 'init')

webPreferences的preload

const { ipcRenderer } = require('electron')
let winId
ipcRenderer.on('init', (event) => {
	winId = event.senderId
	window.init()
})
window.move = (x, y) => {
	ipcRenderer.sendTo(winId,'move',x, y)
}

頁面js

let moveIng = false
let startX = 0
let startY = 0
const move = (event) => {
	if (!moveIng) return
	const x = window.screenX + event.clientX - startX
	const y = window.screenY + event.clientY - startY
	window.move(x, y)
}
//綁定拖拽移動事件
document.addEventListener('mousedown', (event) => {
	if (event.button === 0 && event.target.tagName !== 'TEXTAREA') {
		moveIng = true
		startX = event.clientX
		startY = event.clientY
		document.addEventListener('mousemove', move)
	}
})
document.addEventListener('mouseup', (event) => {
	if (!moveIng) return
	document.removeEventListener('mousemove', move)
	moveIng = false
})

測試,Win和Mac拖拽正常,光標(biāo)正常

But,換電腦在測試時,發(fā)現(xiàn)某個Win的電腦移動窗口時,窗口尺寸會不停的變大

甚至只要鼠標(biāo)按在窗口上,尺寸都可能會改變

so,繼續(xù)改吧

縮放

經(jīng)過多次測試和查閱

最終把問題定位在Win的縮放與布局

該選項(xiàng)如果是100%測試一點(diǎn)問題都沒有

如果每次拖動尺寸會發(fā)生改變,那我們就不再使用setPosition改用setBounds

每次調(diào)整位置時直接將尺寸也傳遞進(jìn)去,修改下代碼

主進(jìn)程

ipcRenderer.on('moveBounds', (event, x, y, width, height) => {
  if (event.senderId == ubWindow.webContents.id) {
    let newBounds = {
      x: parseInt(x),
      y: parseInt(y),
      width: parseInt(width),
      height: parseInt(height),
    }
    ubWindow.setBounds(newBounds)
  }
})
// 初始化
ipcRenderer.sendTo(ubWindow.webContents.id, 'init')

webPreferences的preload

const { ipcRenderer } = require('electron')
let winId
ipcRenderer.on('init', (event) => {
	winId = event.senderId
	window.init()
})
window.moveBounds = (x, y, width, height) => {
	ipcRenderer.sendTo(winId, 'moveBounds', x, y, width, height);
}

頁面js

let moveIng = false
let startX = 0
let startY = 0
let lastWidth = 0
let lastHeight = 0
const move = (event) => {
  if (!moveIng) return
  const x = window.screenX + event.clientX - startX
  const y = window.screenY + event.clientY - startY
  window.moveBounds(parseInt(x), parseInt(y), lastWidth, lastHeight)
}
//綁定拖拽移動事件
document.addEventListener('mousedown', (event) => {
  if (event.button === 0 && event.target.tagName !== 'TEXTAREA') {
    moveIng = true
    startX = parseInt(event.clientX)
    startY = parseInt(event.clientY)
    lastWidth = parseInt(window.outerWidth)
    lastHeight = parseInt(window.outerHeight)
    document.addEventListener('mousemove', move)
  }
})
document.addEventListener('mouseup', (event) => {
  if (!moveIng) return
  document.removeEventListener('mousemove', move)
  moveIng = false
})

調(diào)整后Win和Mac測試均正常

但如果拖動過快,仔細(xì)觀察,窗口有時會閃爍

而且文本框中的內(nèi)容有時會變成選中狀態(tài)

嗯~ o(*￣▽￣*)o 暫時就醬吧

有大神知道更好解決方案的話可以貼出來觀摩下

補(bǔ)充：

Electron無邊框自定義窗口拖動

解決方案

    <header class="absolute" style="left:0px;top:0px;width:100%;height:48px;background-color:red;padding:0px;margin:0px;">
      <div class="absolute" style="left:0px;top:0px;width:100%;height:100%;-webkit-app-region:drag">
        <button style="width:200px;height:100px;-webkit-app-region:no-drag;" @click="console.log('abc')">點(diǎn)我</button>
      </div>
    </header>

首先外部可拖拽區(qū)域設(shè)置：-webkit-app-region:drag;
如果想要里面的按鈕可點(diǎn)擊，僅需要設(shè)置按鈕不可拖拽就行：-webkit-app-region:drag;

到此這篇關(guān)于electron 無邊框窗口拖拽移動問題記錄及解決辦法的文章就介紹到這了,更多相關(guān)electron 無邊框窗口拖拽移動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解JavaScript邏輯And運(yùn)算符
這篇文章主要介紹了JavaScript邏輯And運(yùn)算符，在JavaScript中，邏輯 AND 運(yùn)算符用雙和號（&&）表示
2015-12-12
淺談JavaScript閉包
這篇文章主要介紹了JavaScript閉包，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
nuxt+axios實(shí)現(xiàn)打包后動態(tài)修改請求地址的方法
這篇文章主要介紹了nuxt+axios實(shí)現(xiàn)打包后動態(tài)修改請求地址的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
2014最熱門的JavaScript代碼高亮插件推薦
本文給大家推薦今年最流行最熱門的7款JavaScript代碼高亮插件，各有優(yōu)缺點(diǎn)，大家根據(jù)下面的介紹，選擇最適合自己的一款吧。
2014-11-11
根據(jù)服務(wù)器時間作為起始，顯示時鐘的小程序
一般的網(wǎng)頁都有這種功能：在頁面上動態(tài)顯示當(dāng)前時間，這個的實(shí)現(xiàn)也很簡單，基本上一行代碼就實(shí)現(xiàn)了
2009-06-06
上一部分給出的函數(shù)已經(jīng)完全地實(shí)現(xiàn)了跨瀏覽器了，但在IE的實(shí)現(xiàn)是極其低劣，動用了多個table以及一向?yàn)槿怂嵅〉臑V鏡。
2009-10-10