如何修改此 HTML 和 JavaScript，以便在网页上提供多个可移动项目？

3回答

SMILET

仅仅复制 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>但您最好使用基于类的脚本。这将为您提供更少的冗余代码。

0 0

ABOUTYOU

查看代码，我们会得到它<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>

0 0

森林海

首先，更改 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 0