Implementation of "quick start electronic" window dragging

After reading this article, you can learn

• Have a basic understanding of process communication

• Learn how to implement the drag and drop function in the customized top bar

Antecedents feed

For some basic of process communication demo You can read my article ：

Hand in hand to get you started Electron

Drag and drop

First, of course, we should disable the top bar in the configuration

...
frame:false,
...


Then go to our

index.html

, To use div Draw a picture header

<div class=&quot;header&quot;></div>


Just give me a black one

Then we will listen to three events ：

mousedown

 

mouseup

 

mousemove

To determine the mouse click 、 Coordinates of mouse movement and mouse release .

Now let's set some variables

let isDown = false; //  Mouse status
let baseX = 0,baseY = 0; // Monitor coordinates


Next is

mousedown

event ：

header.addEventListener('mousedown',function(e){
 isDown = true 
 baseX = e.x
 baseY = e.y
})


You can see that every time you click the black top bar, the coordinates are printed on the right

Open the console shortcut key  ctrl shift i

Then what we need to do is to get the real-time position of the window while moving , First of all, let's understand this

Think of the screen as a coordinate axis , The last thing we need is

(screenX - baseX) , (screenY - baseY)

So let's write

 document.addEventListener('mousemove',function(e){
 if(isDown){
 const x = e.screenX - baseX
 const y = e.screenY - baseY

 ipcRenderer.send('move-application',{
 posX:x,
 posY:y
 })
 }
})


Work out

x,y

And send it to the main process , If you don't know how to communicate, you can also go to my previous quick start article .

Next, receive in the main process , And use

setPosition

Method to set the location in real time .

ipcMain.on('move-application',(event,pos) => {
 mainWin && mainWin.setPosition(pos.posX,pos.posY)
})


Let's print pos  have a look ：

You can see the crazy scrolling coordinates on our console , Prove that our operation is correct .

Finally, don't forget that when the mouse is raised

isDown

Set back .

document.addEventListener('mouseup',function(){
 isDown = false
})


thus , Our drag and drop is successful , Have you learned ？

Electron Series

• Hand in hand to get you started Electron)

• bag yyds：
  from  Electron  Starting from the framework , Go deep into  Electron  Cross end principle  |  Many pictures explain

• Small f The plug-in with the pig skin ：
  vue + electron  Develop a real-time monitor github Cross end desktop applications for

Last

I am a  

Ned

  A person who has been delayed for several years by the epidemic 、 College students who are about to be senior .

Pay attention to me , Work hard together ！

You can be in the official account. ：

Front end growth diary

  Find me in ~