document.addEventListener blocking highlight in textarea

I did a div that is moveable but unfortunetaly the function that let user move the div also block the highlight of the text in the text area behind.

I would like to keep the possibility to move the div and to highlight the text in textarea like I want.

Ps: I already tried to put the addEventListener on varMoveButtonNotesWindow but it’s really ncomfortable to use it like that (we need to keep the cursor in the little box, and I dont want the box to be bigger it wouldn’t look good).

Here’s the code:

var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');

varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        varNotesWindow.offsetLeft - e.clientX,
        varNotesWindow.offsetTop - e.clientY
    ];
}, true);

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

//The bug occurs here
document.addEventListener('mousemove', function(event) { 
    event.preventDefault();
    if (isDown) {
        mousePosition = {
    
            x : event.clientX,
            y : event.clientY
    
        };
        varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
        varNotesWindow.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true); 
//so far


function closeNotesWindow() {
  varNotesWindow.classList.remove('show');
}

function openNotesWindow() {
  windowsModalContainer.classList.remove('show');
  varNotesWindow.classList.add('show');
};

.firstTextarea {
  height: 300px;
  width: 300px;
}

#notesWindow {
  display: block;
  position: absolute;
  width: 300px;
  height: 275px;
  top: 0px;
  left: 0px;
  border: 2px solid #313131;
  z-index: 2;
  resize: both;
  overflow: auto;
}

#headerNotesWindow {
  height: 35px;
  background-color: black;
}


#moveButtonNotesWindow {
  position: absolute;
  background-color: blue;
  color: white;
  width: 20px;
  height: 20px;
  right: 5px;
  z-index: 1;
  top: 7.5px;
}

#closeButtonNotesWindow {
  position: absolute;
  background-color: red;
  color: white;
  width: 20px;
  height: 20px;
  right: 30px;
  z-index: 1;
  top: 7.5px;
}

#divTextareaNotesWindow {
  text-align: center;
  height: calc(100% - 6px - 35px);
}

#textareaNotesWindow {
  resize: none;
  width: calc(100% - 6px);
  height: 100%;
  outline: none;
}

<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>

<div class="divWindow" id="notesWindow">
    <div id="headerNotesWindow">
      <div id="moveButtonNotesWindow"></div>
      <div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
    </div>
  
    <div id="divTextareaNotesWindow">
      <textarea id="textareaNotesWindow"></textarea>
    </div>
  </div>