Added Draggable Window for demoHEADmain

3 files changed, 26 insertions, 4 deletions

diff --git a/css/layouts.css b/css/layouts.css
index 414f7b6..8c79e24 100644
--- a/css/layouts.css
+++ b/css/layouts.css
@@ -140,6 +140,10 @@
   background-repeat: no-repeat;
 }
 
+#desktop {
+  position: relative;
+}
+
 .window {
   background-color: #eeeeee;
   position: absolute;
@@ -148,9 +152,8 @@
 .non-resizable {
   width: 720px;
   height: 480px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: calc(50% - 240px);
+  left: calc(50% - 360px);
 }
 
 .window header {
@@ -166,6 +169,8 @@
   left: 50%;
   top: 10px;
   transform: translateX(-50%);
+  user-select: none;
+  cursor: default;
 }
 
 .buttons {
@@ -180,3 +185,8 @@
   padding: 9px 15px 14px 15px;
   background-color: red;
 }
+
+.windowContents {
+  padding: 10px;
+  font-family: 'Chicago';
+}
diff --git a/index.html b/index.html
index 3e99fee..bcea342 100644
--- a/index.html
+++ b/index.html
@@ -121,7 +121,9 @@
             <span class="close" id="closePreferences">&times;</span>
           </div>
         </header>
-        <div class="windowContents"></div>
+        <div class="windowContents">
+          <p>This window is draggrable within this tab. Try grabbing it from the header and dragging it anywhere you want.</p>
+        </div>
       </div>
     </section>
     <!-- Scripts -->
diff --git a/js/desktop.js b/js/desktop.js
index cef0d7b..4e27144 100644
--- a/js/desktop.js
+++ b/js/desktop.js
@@ -8,6 +8,16 @@ const currentIndex = parsedAccounts.findIndex(
 const desktop = document.getElementById("desktop");
 const wallpaperRoute = "./images/wallpapers";
 const wallpaperExtension = ".jpeg";
+const draggableElements = document.querySelectorAll('.draggable');
+const draggableWindows = [];
+
+draggableElements.forEach(draggableElement => {
+    const currentDraggableWindow = new Draggabilly(draggableElement, {
+        containment: '#desktop',
+        handle: 'header',
+    });
+    draggableWindows.push(currentDraggableWindow);
+});
 
 if(!currentAccount.wallpaper) {
     currentAccount['wallpaper'] = 'Wallpaper1';