update

2026-05-17 15:30:11 +05:30
commit cae37e5af7
23 changed files with 3607 additions and 0 deletions
--- a/public/OLD/xyz.html
+++ b/public/OLD/xyz.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Custom Draggable Items</title>
+  <style>
+    /* The container remains the parent element */
+    draggable-container {
+      display: block;
+      position: relative;
+      width: 100%;
+      height: 100vh;
+      background-color: #f0f0f0;
+      border: 1px solid #ccc;
+      padding: 10px;
+      overflow: hidden;
+    }
+    /* Each draggable item is an absolutely positioned wrapper */
+    .draggable {
+      position: absolute;
+      cursor: grab;
+      /* Optional: add a subtle shadow to show the item floating */
+      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
+    }
+    /* Style the iframe as needed */
+    .draggable iframe {
+      display: block;
+      width: 300px;
+      height: 200px;
+      border: 2px solid aqua;
+      background-color: black;
+    }
+  </style>
+</head>
+<body>
+  <button onclick="document.querySelector('draggable-container').toggleDraggable()">
+    Enable/Disable Drag
+  </button>
+  
+  <draggable-container>
+    <!-- Wrap each iframe in a .draggable wrapper -->
+    <div class="draggable" style="top: 50px; left: 50px;">
+      <iframe src="./main_left_menu.html"></iframe>
+    </div>
+    <div class="draggable" style="top: 200px; left: 100px;">
+      <iframe src="./arc_reactor.html"></iframe>
+    </div>
+    <div class="draggable" style="top: 400px; left: 300px;">
+      <iframe src="./right.html"></iframe>
+    </div>
+  </draggable-container>
+  
+  <script>
+    class DraggableContainer extends HTMLElement {
+      constructor() {
+        super();
+        this.isDraggable = true;
+        // Bind our event handler so that it can be removed properly.
+        this.onMouseDown = this.onMouseDown.bind(this);
+      }
+      
+      connectedCallback() {
+        // Use event delegation: listen for mousedown on the container.
+        this.addEventListener("mousedown", this.onMouseDown);
+      }
+      
+      onMouseDown(e) {
+        if (!this.isDraggable) return;
+        
+        // Find the closest draggable wrapper that is a direct child of the container.
+        let draggableElem = e.target.closest(".draggable");
+        if (!draggableElem || draggableElem.parentElement !== this) return;
+        
+        // Calculate the offset between the mouse position and the element's top-left corner.
+        let offsetX = e.clientX - draggableElem.offsetLeft;
+        let offsetY = e.clientY - draggableElem.offsetTop;
+        
+        // Change the cursor to indicate dragging.
+        draggableElem.style.cursor = "grabbing";
+        
+        const onMouseMove = (event) => {
+          draggableElem.style.left = (event.clientX - offsetX) + "px";
+          draggableElem.style.top = (event.clientY - offsetY) + "px";
+        };
+        
+        const onMouseUp = () => {
+          draggableElem.style.cursor = "grab";
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+        
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      }
+      
+      toggleDraggable() {
+        this.isDraggable = !this.isDraggable;
+        alert(this.isDraggable ? "Dragging Enabled" : "Dragging Disabled");
+      }
+    }
+    
+    customElements.define("draggable-container", DraggableContainer);
+  </script>
+</body>
+</html>