random position boxes on refresh + fix zIndex

index.html

@@ -21,7 +21,7 @@
 
         <h1>windows.open(Welcome)</h1>
 
-        <div id="boxes">
+        <div id="dragZone" class="dragzone">
 
             <div id="program" class="ui-widget-content draggable resizable" style="max-width: 250px; height: 1400px;">
                 <h1>10 Sept 21</h1>

scripts/App.js

@@ -1,14 +1,13 @@
 // TODO
     // glyphs
-    // random position
     // what buttons where
         // colophone
     // a bit more interface
 
-
 // DONE
     // Open window icon (on background 'desktop')
     // Close window button (on 'window' itself)
+    // random position
 
 let corpi = {
     0: { 
@@ -37,7 +36,8 @@ $(document).ready(function(){
 
     // Generate divs
     Object.values(corpi).forEach(corpus => {
-        $('#boxes' ).append(`
+
+        $('#dragZone' ).append(`
             <div class="ui-widget-content draggable resizable" id="${corpus['id']}">
                 <h1>${corpus['title']}</h1>
                 <p>${corpus['content']}</p>
@@ -49,7 +49,6 @@ $(document).ready(function(){
 
     // Start mouse UI
     const dragResize = new DragResizeClose();
-
 });
 class DragResizeClose {
     constructor() {
@@ -98,16 +97,36 @@ class DragResizeClose {
         $( ".draggable" ).each(function() {
             let rw = getRndInteger((getWidth())/2-500,(getWidth())/2)
             //let rh = getRndInteger(heightDrag-200, heightDrag)
-            $( this ).css("width",rw);
-            $( this ).css("height", 'auto');
+
+            //setDimension
+            $(this).css("width",rw);
+            $(this).css("height", 'auto');
+
+            //setPosition
+            let w = window.innerWidth;
+            let h = window.innerHeight;
+
+            if (this.id != 'program'){
+                let wBox = $(this).css('width');
+                let hBox = $(this).css('height');
+                let rX =  randomCorrected(h, hBox);
+                let rY =  randomCorrected(w, wBox);
+                $(this).css("top", rX);
+                $(this).css("left", rY);
+            } else {
+                $(this).css("top", '20px');
+                $(this).css("right", '20px');
+            }
+
         });
     }
 
     setZindex() {
-        $('#dragZone div').click(() => {                              // Setup z-index handler
+        let zIndex = 3;
+        $('#dragZone div').mousedown(function() {                         // Setup z-index handler
             $(this).addClass('top').removeClass('bottom');
             $(this).siblings().removeClass('top').addClass('bottom');
-            $(this).css("z-index", this.zIndex++);
+            $(this).css("z-index", zIndex++);
         });
     }
 
@@ -133,3 +152,7 @@ class DragResizeClose {
     }
 }
 
+function randomCorrected(sideWindow, sideBox){
+	var corrected = sideWindow - parseInt(sideBox);
+	return Math.floor(Math.random() * corrected)
+}