Flex控制弹出窗口拖动范围示例代码

以下是一个使用JavaScript和HTML来创建可以控制拖动范围的弹出窗口（模态框）的简单示例。这个示例中，我将使用CSS来限制拖动边界，并通过JavaScript来实现拖动功能。

### HTML


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Modal with Limited Range</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

### CSS (`style.css`)


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px; /* Fixed width */
  height: 200px; /* Fixed height */
  overflow: auto; /* Enable scroll if needed */
  border: 1px solid #ccc; /* Add some padding */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Some nice shadow */
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 100%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Additional styles for drag limiting can be applied dynamically in JavaScript */

### JavaScript (`script.js`)

``

`javascript

// Get the modal

var modal = document.getElementById("myModal");

// Get the button that opens the modal

// (In a real scenario, this would be a button, not shown here for brevity)

// Get the element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal

// (This part is omitted for brevity, as it's not directly related to dragging)

// Close the modal

span.onclick = function() {

modal.style.display = "none";

}

// Draggable modal logic (simplified version, without range limiting)

let active = false;

let currentX;

let currentY;

let initialX;

let initialY;

let xOffset = 0;

let yOffset = 0;

modal.onmousedown = dragMouseDown;

function dragMouseDown(e) {

e.preventDefault();

active = true;

currentX = e.clientX - xOffset;

currentY = e.clientY - yOffset;

initialX = modal.offsetLeft;

initialY = modal.offsetTop;

if (e.target === modal) {

document.addEventListener("mousemove", dragMouseMove, false);

document.addEventListener("mouseup", closeDragElement, false);

}

}

function dragMouseMove(e) {

if (active) {

e.preventDefault();

let posX = e.clientX - currentX;

let posY = e.clientY - currentY;

// Limit drag range here (example: within viewport)

posX = Math.min(Math.max(posX, 0), window.innerWidth - modal.offsetWidth);

posY = Math.min(Math.max(posY, 0), window.innerHeight - modal.offsetHeight);

modal.style.left = posX + 'px';

modal.style.top = posY + 'px';

}

}

function closeDragElement() {

document.removeEventListener("mousemove", dragMouseMove, false);

document.removeEventListener("mouseup", closeDragElement, false