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

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

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

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

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

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>

uj5u.com熱心網友回復：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/485591.html

標籤：javascript html css

上一篇：嵌套串列迭代時，串列中的每個子項都應具有唯一的“鍵”道具

下一篇：將多維陣列傳遞到Google.visualization.arrayToDataTable