我在网上发现了这段代码，它创建了一个可拖动的屏幕"卡片"；。
我想添加更多的卡片。我试着简单地制作更多的卡片，但这让我的卡片一点也不动。
<!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>但是您可以更好地使用基于类的脚本。这将减少冗余代码。
首先，更改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"));
查看代码，我们将获得
<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>
对于每一张卡，您都必须复制脚本，并在函数ex:myFunction2ect后面放置2、3或4。
我使用了你的相同示例，但对你的脚本进行了新的复制，并在函数中添加了2。这是我得到的最后一个脚本，并且有效：
<!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;
}
#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;
}
</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>
<div id="mydiv2">
<div id="mydivheader2">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;
}
}
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv2"));
function dragElement2(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 = dragMouseDown2;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown2;
}
function dragMouseDown2(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement2;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag2;
}
function elementDrag2(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 closeDragElement2() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>