极客教程JavaScript 实现可拖动元素
拖动一个对象并将其移动到页面中的另一个位置是一个非常交互和用户友好的概念，使用户更容易使用。该功能允许用户点击并按住鼠标按钮在一个元素上拖动它到另一个位置，然后释放鼠标按钮以放置该元素。
让我们来看一下最终的功能将是什么样子：
前提条件：
- HTML
- CSS
- JavaScript
项目结构：
--index.html
--style.css
--script.js
方法： 我们将实现可拖拽功能，可以拖动任何元素。以下是创建可拖拽元素的步骤。
- HTML部分： 页面的HTML部分将放在index.html文件中，我们只需要创建一个div作为项目。您可以选择任何元素使其可拖拽。
- CSS部分： 该部分将包含与页面样式或我们所选择的div相关的所有代码。我们只是为div添加了样式，并给它设置了浅绿色的背景色。该文件的代码如下所示。
- JavaScript部分： 该部分处理用户定义的JavaScript函数，如onMouseDrag()。在该函数中，我们只是在用户点击元素时跟踪鼠标移动。通过将这些值赋给div的样式，我们可以轻松地使div可拖拽。要调用onMouseDrag()函数，我们将在mousedown和mouseup事件上添加EventListener。
示例： 将以下代码写入相应的文件中。
- index.html： 此文件包含该功能的结构。
- style.css： 此文件包含可拖拽组件的样式。
- script.js： 此文件包含移动元素的逻辑。
HTML
<!-- index.html File -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS file -->
<link rel="stylesheet" href="style.css">
<title>Draggable Element</title>
</head>
<body>
<div class="container">
<header>Draggable element</header>
<div class="draggable-container">
<p> This is the example. <br>
Click on me and try to drag within this Page.
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
/* style.css File */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: azure;
}
.container {
position: absolute;
left: 50%;
top: 50%;
min-height: 2rem;
width: 15rem;
padding: 10px;
background-color: rgb(218, 255, 194);
border-radius: 5px;
transform: translate(-50%, -50%);
cursor: move;
user-select: none;
}
.container header {
font-weight: 600;
text-transform: uppercase;
border-bottom: 1px solid black;
}
.draggable-container {
margin: 10px 0;
}
JavaScript
// script.js File
const container = document.querySelector(".container");
function onMouseDrag({ movementX, movementY }) {
let getContainerStyle = window.getComputedStyle(container);
let leftValue = parseInt(getContainerStyle.left);
let topValue = parseInt(getContainerStyle.top);
container.style.left = `{leftValue + movementX}px`;
container.style.top = `{topValue + movementY}px`;
}
container.addEventListener("mousedown", () => {
container.addEventListener("mousemove", onMouseDrag);
});
document.addEventListener("mouseup", () => {
container.removeEventListener("mousemove", onMouseDrag);
});
输出:
