如何使用純 HTML、CSS 和 JavaScript 解決這種拖放問題

Question

我正在嘗試解決與拖放測試相關的問題。

請看下面的圖片。 有 3 列，每列包含 3 個不同顏色的小盒子。 這些框是可拖動的，意味着它們可以在任何列之間拖放，但必須滿足以下 2 個條件：
● 兩個相同顏色的框不能在同一列。 如您所見，第一列和第二列各包含一個綠色框。 所以你不能將綠色框從第一列拖到第二列，但它可以拖到第三列。
● 拖放應僅限於列區域。 如果您將一個框拖放到非列的某個位置，它應該返回到從中拖動它的列

點擊查看圖片

這是我的代碼未能跟蹤相同的顏色識別...

 var p = document.getElementsByTagName('p'); var choice = document.getElementsByClassName('choice'); var dragItem = null; console.log(p) for (var i of p) { i.addEventListener('dragstart', dragStart); i.addEventListener('dragend', dragEnd); console.log(i) } function dragStart() { dragItem = this; setTimeout(() => this.style.display = "none", 0); } function dragEnd() { setTimeout(() => this.style.display = "block", 0); dragItem = null; } for (j of choice) { j.addEventListener('dragover', dragOver); j.addEventListener('dragenter', dragEnter); j.addEventListener('dragleave', dragLeave); j.addEventListener('drop', Drop); } function Drop() { this.append(dragItem) } function dragOver(e) { e.preventDefault() } function dragEnter(e) { e.preventDefault() } function dragLeave() {}

 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <title>drag & drop</title> </head> <body> <h1>Rank in order as your choice</h1> <section> <div class="choice"> <p id="green" draggable="true">Green</p> <p id="orange" draggable="true">Orange</p> <p id="purple" draggable="true">Purple</p> </div> <div class="choice"> <p id="yellow" draggable="true">Yellow</p> <p id="green" draggable="true">Green</p> <p id="orange" draggable="true">Orange</p> </div> <div class="choice"> <p id="pink" draggable="true">Pink</p> <p id="skyblue" draggable="true">Skyblue</p> <p id="purple" draggable="true">Purple</p> </div> </section> <script src="./index.js"></script> </body> </html>

Answer 1

在 Drop 功能檢查目標元素是否已拖動元素 ID

function Drop() {
  if (this.querySelector('#' + dragItem.id)) {
    return;
  }
  this.append(dragItem)
}

片段

 var p = document.getElementsByTagName('p'); var choice = document.getElementsByClassName('choice'); var dragItem = null; //console.log(p) for (var i of p) { i.addEventListener('dragstart', dragStart); i.addEventListener('dragend', dragEnd); i.style.background = i.id; //console.log(i) } function dragStart() { dragItem = this; setTimeout(() => this.style.display = "none", 0); } function dragEnd(ev) { setTimeout(() => this.style.display = "block", 0); dragItem = null; } for (var j of choice) { j.addEventListener('dragover', dragOver); j.addEventListener('dragenter', dragEnter); j.addEventListener('dragleave', dragLeave); j.addEventListener('drop', Drop); } function Drop() { if (this.querySelector('#' + dragItem.id)) { return; } this.append(dragItem) } function dragOver(e) { e.preventDefault() } function dragEnter(e) { e.preventDefault() } function dragLeave() {}

 .choice { float: left; margin: 5px; border: 1px solid #bbb; padding: 5px; } .choice p { border: 1px solid #bbb; }

 <h1>Rank in order as your choice</h1> <section> <div class="choice"> <p id="green" draggable="true">Green</p> <p id="orange" draggable="true">Orange</p> <p id="purple" draggable="true">Purple</p> </div> <div class="choice"> <p id="yellow" draggable="true">Yellow</p> <p id="green" draggable="true">Green</p> <p id="orange" draggable="true">Orange</p> </div> <div class="choice"> <p id="pink" draggable="true">Pink</p> <p id="skyblue" draggable="true">Skyblue</p> <p id="purple" draggable="true">Purple</p> </div> </section>

如何使用純 HTML、CSS 和 JavaScript 解決這種拖放問題

問題描述

1 個解決方案

解決方案1
0 已采納 2022-06-05 08:01:58

如何使用純 HTML、CSS 和 JavaScript 解決這種拖放問題

問題描述

1 個解決方案

解決方案1 0 已采納 2022-06-05 08:01:58

解決方案1
0 已采納 2022-06-05 08:01:58