如何拖放元素並與可拖動元素交換元素 position

Question

我創建了六個div元素，每個元素都有一個id 。 在這六個div元素中，我創建了六個img元素，每個元素都有一個id 。

現在我想拖動任何圖像並將其放在六個div元素中的任何一個上。

當我將圖像 1 拖放到div 5 上時， div 5 圖像應該移動到div 1。我該如何實現這一點？ 這是我的代碼：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <interface id="interface">
        <div id="div1"><img src="images/images/Number1.png" alt="one" id="drag1" draggable="true"></div>
        <div id="div2"><img src="images/images/Number2.png" alt="two" id="drag2" draggable="true"></div>
        <div id="div3"><img src="images/images/Number3.png" alt="three" id="drag3" draggable="true"></div>
        <div id="div4"><img src="images/images/Number4.png" alt="four" id="drag4" draggable="true"></div>
        <div id="div5"><img src="images/images/Number5.png" alt="five" id="drag5" draggable="true"></div>
        <div id="div6"><img src="images/images/Number6.png" alt="six" id="drag6" draggable="true"></div>
    </interface>

    <script src="app.js"></script>
</body>

</html>

Javascript 代碼從這里開始：

console.log("Get Started");

const imgboxes = document.querySelectorAll("img");
console.log(imgboxes);
const divBoxes = document.querySelectorAll("div");
console.log(divBoxes);

for (imgbox of imgboxes) {
  imgbox.addEventListener('dragstart', (e) => {
    console.log("dragStart triggred");
    setTimeout(() => {
      e.target.className = "hide";
    }, 0);
    
  })
}
for (imgbox of imgboxes) {
  imgbox.addEventListener('dragend', (e) => {
    console.log("dragEnd triggred");
    e.target.className = "imgbox"
  })
}

for (divbox of divBoxes) {
  divbox.addEventListener('dragover', (e) => {
    console.log("dragOver triggred");
    e.preventDefault();
    
  })

  divbox.addEventListener('dragenter', () => {
    console.log("dragEnter triggred");
  })
  divbox.addEventListener('dragleave', () => {
    console.log("dragLeave triggred");
  })
  divbox.addEventListener('drop', (e) => {
    console.log("dragDrop triggred");
    e.target.appendChild(imgbox);
  })

}

CSS 代碼在這里：

body{
    padding: 0;
    margin: 0 auto;
}
#div1, #div2, #div3, #div4, #div5, #div6{
    float: left;
    width:85px;
    height:85px;
    margin: 20px; 
    padding: 0px;
    border: 1px solid black;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #drag1, #drag2, #drag3, #drag4, #drag5, #drag6{
    height: 80px;
    width: 80px;
    margin-top: 2px;
  }
  #interface{
    display: flex;
    flex-direction: row;
    margin: 100px auto;
    align-items: center;
    justify-content: center;
  }

  .hide{
    display: none;
  }
  .imgbox{
    height: 80px;
    width: 80px;
    margin-top: 2px;
  }

Answer 1

因此，基於 Kunal Tanwar 提到的通過拖放使用 javascript 交換 div 的子元素中提出的想法，這里是您需要的工作演示。

為了避免全局變量，您需要將event.target.id存儲在dragStart() function 中。

您可以在 dragDrop dragDrop()中檢索圖像id並將其存儲在draggedImageId中。

然后使用該id來檢索draggedImage

然后進行測試以確保您沒有將圖像放回同一個容器中。

請記住， appendChild會從其先前的父元素中刪除要附加的子元素。

 const images = document.querySelectorAll("img"); const containers = document.querySelectorAll(".container"); images.forEach((image) => { image.addEventListener("dragstart", dragStart); image.addEventListener("dragend", dragEnd); }); containers.forEach((container) => { container.addEventListener("dragover", dragOver); container.addEventListener("dragenter", dragEnter); container.addEventListener("dragleave", dragLeave); container.addEventListener("drop", dragDrop); }); function dragStart(event) { event.dataTransfer.setData("draggedImage", event.target.id); setTimeout(() => this.setAttribute("hidden", "")); } function dragEnd() { this.removeAttribute("hidden"); } function dragOver(event) { event.preventDefault(); } function dragEnter(event) { event.preventDefault(); this.classList.add("hovered"); } function dragLeave() { this.classList.remove("hovered"); } function dragDrop(event) { const draggedImageId = event.dataTransfer.getData("draggedImage") const draggedImage = document.getElementById(draggedImageId); if (this.== draggedImage.parentNode) { draggedImage.parentNode.appendChild(this;firstElementChild). this;appendChild(draggedImage). } this.classList;remove("hovered") }

 .row { display: flex; column-gap: 1rem; }.row.container { width: 200px; height: 200px; padding: 1rem; border: solid 3px black; }.row.container img { cursor: grab; }.row.container img.invisible { display: none; }.row.container img:active { cursor: grabbing; }.row.container.hovered { border: dashed 3px grey; }

 <div class="row"> <div class="container"> <img id="drag1" src="https://source.unsplash.com/random/100x100/?cat" draggable="true" /> </div> <div class="container"> <img id="drag2" src="https://source.unsplash.com/random/100x100/?fruit" draggable="true" /> </div> <div class="container"> <img id="drag3" src="https://source.unsplash.com/random/100x100/?car" draggable="true" /> </div> <div class="container"> <img id="drag4" src="https://source.unsplash.com/random/100x100/?dog" draggable="true" /> </div> </div>

如何拖放元素並與可拖動元素交換元素 position

問題描述

1 個解決方案

解決方案1
0 2022-07-26 11:56:28

如何拖放元素並與可拖動元素交換元素 position

問題描述

1 個解決方案

解決方案1 0 2022-07-26 11:56:28

解決方案1
0 2022-07-26 11:56:28