red square move, text selection allowed

by blueseal

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div>You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to...

CSS

body{
  height: 1000px;
  width: 1000px;
}

JavaScript

var mousePosition;
var offset = [0,0];
var div;
var isDown = false;

div = document.createElement("div");
div.style.position = "absolute";

div.innerHTML = "<div> allow this text selection too</div>"

div.style.left = "100px";
div.style.top = "100px";
div.style.width = "100px";
div.style.height = "100px";

div.style.background = "red";
div.style.color = "blue";

document.body.appendChild(div);

div.addEventListener('mousedown', function(e) {

 if (e.target !== div) {// <----
    return;
  }  
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true); 

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

document.addEventListener('mousemove', function(event) {
  
    if (isDown) {
    event.preventDefault();
        mousePosition = {
    
            x : event.clientX,
            y : event.clientY
    
        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);