第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何修改此 HTML 和 JavaScript，以便在網(wǎng)頁(yè)上提供多個(gè)可移動(dòng)項(xiàng)目？

如何修改此 HTML 和 JavaScript，以便在網(wǎng)頁(yè)上提供多個(gè)可移動(dòng)項(xiàng)目？

jeck貓 2023-11-12 22:07:22
我在網(wǎng)上找到了這段代碼，它創(chuàng)建了一個(gè)可在屏幕上拖動(dòng)的“卡片”。我想添加更多卡。我嘗試簡(jiǎn)單地制作更多的卡片，但這讓我得到的卡片根本不動(dòng)。<!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>如何添加不止一張可移動(dòng)的卡？
查看完整描述

3 回答

?
SMILET

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

僅僅復(fù)制 html 的問(wèn)題是，您還需要復(fù)制 css 和 javascript。最重要的是，您需要更改新元素的 id，否則一切都會(huì)變得一團(tuán)糟。


這個(gè)例子不會(huì)教你好的代碼，而是回答你的問(wèn)題：


//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>

但您最好使用基于類的腳本。這將為您提供更少的冗余代碼。



查看完整回答
反對(duì) 回復(fù) 2023-11-12
?
ABOUTYOU

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊

查看代碼，我們會(huì)得到它


<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>


查看完整回答
反對(duì) 回復(fù) 2023-11-12
?
森林海

TA貢獻(xiàn)2011條經(jīng)驗(yàn) 獲得超2個(gè)贊

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

}

然后，根據(jù)腳本將這些類以及適當(dāng)?shù)?ID（`#mydivtwo 等）應(yīng)用到您的兩張（或其他）卡片上：


<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>

然后，只需在相關(guān)元素上調(diào)用相關(guān)函數(shù)即可：


  dragElement(document.getElementById("mydiv"));

  dragElement(document.getElementById("mydivtwo"));


查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 3 回答
  • 0 關(guān)注
  • 223 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)