javascript - 如何修改此 HTML 和 JavaScript,使其在网页上提供多个可移动项目?
问题描述
我在网上找到了这段代码,它创建了一个可在屏幕上拖动的“卡片”。
我想添加更多卡片。我试着简单地制作更多的卡片,但这让我的卡片根本不动。
<!DOCTYPE html>
<html>
<style>
body {
background-image: url('background1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
<style>
#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
</style>
<body>
<h1>Fun</h1>
<p>Click to move the card around</p>
<div id="mydiv">
<div id="mydivheader">Click here</div>
<p>This is a card with stuff on it.</p>
</div>
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
我怎样才能添加不止一张可移动的卡片?
解决方案
仅复制 html 的问题在于您还需要复制 css 和 javascript。最重要的是,您需要更改新元素的 id,否则一切都会一团糟。
这个例子不会教你很好的代码,而是回答你的问题:
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
dragElement(document.getElementById("mydiv2"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
#mydiv2 {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#mydivheader2 {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
<h1>Fun</h1>
<p>Click to move the card around</p>
<div id="mydiv">
<div id="mydivheader">Click here</div>
<p>This is a card with stuff on it.</p>
</div>
<div id="mydiv2">
<div id="mydivheader2">Click here</div>
<p>This is a card with stuff on it.</p>
</div>
但是您最好使用基于类的脚本。这将为您提供更少的冗余代码。
推荐阅读
- python - 如何将csv文件中的数字提取到变量中
- python - 在 Python 中使用装饰器进行线程化
- android - 有没有办法使用firestore获取数组长度
- angular - 如何将 routerlinkactive 与功能一起使用
- javascript - javascript中使用的参考在catch-Block中不可用
- sql-server - 使用 splunk 跟踪 sql server 中的内存转储?
- ios - 在 SwiftUI 中的 Form 上捕捉 Tap 手势
- wordpress - 如何修复破坏页面的 WordPress 模板错误
- appium - 如何在Python中找到具有相同ID的appium中的多个元素?
- resharper - 如何手动将缩写添加到 ReSharper 缩写列表?