drag.js

window.onload= function()
{
   createContainer();
   createObject(1);
}   
var dragObj = null;
let width=window.innerWidth;
let height=window.innerHeight;

function startDrag(e)
 {
    dragObj = e.target;
    dragObj.style.position = "absolute";
    dragObj.style.backgroundColor="#00FF00";
    window.addEventListener('mousemove', dragObject, true);	   
}

function dragObject(e){
    dragObjCSS = window.getComputedStyle(dragObj, null);
    if(dragObj == null) return; 
    else if(e.type=="mousemove"){
       if((50+e.clientX)<width && (50+e.clientY)<height && e.clientY>0)
       {
            dragObj.style.left = e.clientX +"px"; 
            dragObj.style.top = e.clientY +"px";
        }
    }
}

document.onmouseup = function(e)
{
    if(dragObj) 
    {
    dragObj.style.backgroundColor="#CACFD2";
    dragObj = null;
    window.removeEventListener('mousemove', dragObject, true);
    }
}

function createObject(x){
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.width = 50 + "px";
    div.style.height = 50 + "px";
    if (x!=1)
    {
    div.style.top = Math.round(Math.random()*(window.innerHeight-50)) + "px";
    div.style.left = Math.round(Math.random()*(window.innerWidth-50)) + "px";
    }
    else
    {
    div.style.top = 50 + "%";
    div.style.left = 50 + "%";
    }
    div.style.backgroundColor = "#CACFD2";
    div.addEventListener("mousedown", startDrag, true);
    var cont1 = document.getElementById("container");
    cont1.appendChild(div);
}

function createContainer(){
    var cont = document.createElement("div");
    cont.setAttribute("id", "container");
    cont.style.width = 100 + "%";
    cont.style.height= 100 + "%";
    var body = document.getElementsByTagName("body");
    body[0].appendChild(cont);
}