107 lines
3.5 KiB
HTML
107 lines
3.5 KiB
HTML
<!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>
|