Currently, I am faced with a challenge involving drag and drop TEST.
Observing the image provided below, you will notice 3 columns each containing 3 small boxes of varying colors. These boxes are draggable, meaning they can be moved between columns following two specific conditions:
● Two identical colored boxes cannot exist in the same column. For example, both the first and second columns have green boxes, so the green box from the first column cannot be dropped into the second column but can be placed in the third column.
● Drag and drop actions should only occur within the column area. If a box is dragged and dropped outside of a column, it should return to its original position
Presented here is the code which unfortunately does not successfully identify matching colors...
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>