Вход

Просмотр полной версии : Проблема с Drag n Drop и bgcolor

s4meone
17.11.2020, 18:06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow</title>
<style>
.content-cell{
width: 10em;
height: 5em;
border: 1px solid #000;
}
.content-cell div{
width: 10em;
height: 5em;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="1" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="2" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="3" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="4" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="5" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="6" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="7" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="8" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="9" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="10" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="11" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="12" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="13" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="14" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
</tbody>
</table>
<button onclick="check()">чекчек чек</button>
</body>
</html>



function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data ));
}

var i = 1;
var colors = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'purple'];
shuffle(colors);
var divids = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];
shuffle(divids);
while (i != 8){
document.getElementById(divids[divids.length - 1]).style.backgroundColor = colors[colors.length - 1];
divids.pop();
colors.pop();
i++;
}

function randomInteger(min, max) {
let rand = min - 0.5 + Math.random() * (max - min + 1);
return Math.round(rand);
}

function shuffle(array) {
array.sort(() => Math.random() - 0.5);
}
function check(){
dv = [7,6,5,4,3,2,1];;
ccc = ['purple', 'blue', 'aqua', 'green', 'yellow', 'orange', 'red'];
var j = 0;
var k = 1;
while (k!=9){
while (k!=8){
if (document.getElementById(dv[dv.length - 1]).style.backgroundColor == ccc[ccc.length - 1]){
j = 1;
ccc.pop();
dv.pop();
k++;
}
else{
j = 0;
k++;
}
}
if (k == 8){
if (j == 1){
alert('Верно!')
} else{
alert('Неверно!')
}
}
k++;
}
}

По сути работает всё, кроме кнопки проверки. Юзеру нужно в левом ряду выставить цвета радуги. Почему-то, при перемещении объектов с одной ячейки в другую не передаётся backgroundColor, это я проверил в консоли. Т.е как вначале заспавнилось "Aqua" в id 1, хоть куда его перемещай, но Aqua останется только в этом div'e с id 1. Не могли бы пожалуйста помочь заставить работать правильно эту зласчастную кнопку?
рони
17.11.2020, 18:50
не передаётся backgroundColor
меняйте логику, используйте class или data-color или data-index, для проверки установленного цвета, но забудьте про

style.backgroundColor == ccc[ccc.length - 1])
s4meone
17.11.2020, 19:22
С самим Drag'n'drop'ом всё в порядке? Думал, что в нём проблема. Можно немного разъяснить про data-color, data-index? Первый раз имею с ними дело
рони
17.11.2020, 19:44
нужно в левом ряду выставить цвета радуги.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow</title>
<style>
.content-cell{
width: 10em;
height: 5em;
border: 1px solid #000;
}
.content-cell div{
width: 10em;
height: 5em;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="1" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="2" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="3" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="4" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="5" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="6" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="7" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="8" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="9" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="10" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="11" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="12" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
<tr>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="13" draggable="true" ondragstart="drag(event)"></div>
</td>
<td class="content-cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="14" draggable="true" ondragstart="drag(event)"></div>
</td>
</tr>
</tbody>
</table>
<button onclick="check()" type="button">чек чек чек</button>
<button onclick="init()" type="button">new</button>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
var div = document.getElementById(id);
var color = div.dataset.color || "";
var targetColor = ev.target.dataset.color || "";
div.style.backgroundColor = targetColor;
div.dataset.color = targetColor;
ev.target.style.backgroundColor = color;
ev.target.dataset.color = color;
}
var colors = ["red", "orange", "yellow", "green", "aqua", "blue", "purple"];
var divids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
function init() {
divids.forEach(function(id) {
var div = document.getElementById(id);
div.style.backgroundColor = "";
div.dataset.color = "";
});
shuffle(divids);
colors.forEach(function(color, i) {
var id = divids[i];
var div = document.getElementById(id);
div.style.backgroundColor = color;
div.dataset.color = color;
});
}
function shuffle(array) {
array.sort(function() {
return Math.random() - 0.5;
});
}
function check() {
var ok = colors.every(function(color, i) {
return document.getElementById(i * 2 + 1).dataset.color == color;
}) ? "Верно!" : "Неверно!";
alert(ok);
}
init();
</script>
</body>
</html>
рони
17.11.2020, 19:46
Можно немного разъяснить про data-color, data-index?
Нестандартные атрибуты, dataset (https://learn.javascript.ru/dom-attributes-and-properties#nestandartnye-atributy-dataset)