我在网上找到了这段代码，它创建了一个可在屏幕上拖动的“卡片”。我想添加更多卡。我尝试简单地制作更多的卡片，但这让我得到的卡片根本不动。<!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>如何添加不止一张可移动的卡？
3 回答
SMILET
TA贡献1796条经验 获得超4个赞
仅仅复制 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>
但您最好使用基于类的脚本。这将为您提供更少的冗余代码。
ABOUTYOU
TA贡献1812条经验 获得超5个赞
查看代码，我们会得到它
<html>
<style>
body {
background-image: url('background1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
<style>
#mydiv,#mydiv1,#mydiv2 {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#mydivheader,#mydivheader1,#mydivheader2 {
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" onmousedown="dragElement(this)">
<div id="mydivheader">Click here</div>
<p>This is a card with stuff on it.</p>
</div><br/>
<div id="mydiv1" onmousedown="dragElement(this)">
<div id="mydivheader1">Click here</div>
<p>This is a card with stuff on it.</p>
</div><br/>
<div id="mydiv2" onmousedown="dragElement(this)">
<div id="mydivheader2">Click here</div>
<p>This is a card with stuff on it.</p>
</div>
//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;
}
}
#mydiv,#mydiv1,#mydiv2 {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#mydivheader,#mydivheader1,#mydivheader2 {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
<!DOCTYPE html>
<html>
<body>
<h1>Fun</h1>
<p>Click to move the card around</p>
<div id="mydiv" onmousedown="dragElement(this)">
<div id="mydivheader">Click here</div>
<p>This is a card with stuff on it.</p>
</div><br/>
<div id="mydiv1" onmousedown="dragElement(this)">
<div id="mydivheader1">Click here</div>
<p>This is a card with stuff on it.</p>
</div><br/>
<div id="mydiv2" onmousedown="dragElement(this)">
<div id="mydivheader2">Click here</div>
<p>This is a card with stuff on it.</p>
</div>
</body>
</html>
<script>
//Make the DIV element draggagle:
//dragElement(document.getElementById("mydiv"));
your all script no change</script>
森林海
TA贡献2011条经验 获得超2个赞
首先，更改 CSS，以便使用通用类，而不是 ID：
.my-div-wrapper {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
.div-header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
然后，根据脚本将这些类以及适当的 ID（`#mydivtwo 等）应用到您的两张（或其他）卡片上：
<div id="mydiv" class="my-div-wrapper">
<div id="mydivheader" class="div-header">Click here</div>
<p>This is a card with stuff on it.</p>
</div>
<div id="mydivtwo" class="my-div-wrapper">
<div id="mydivtwoheader" class="div-header">Click here</div>
<p>This is a card with stuff on it.</p>
</div>
然后，只需在相关元素上调用相关函数即可：
dragElement(document.getElementById("mydiv"));
dragElement(document.getElementById("mydivtwo"));
添加回答
举报
0/150
提交
取消