Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.11.2020, 18:06
Интересующийся
Отправить личное сообщение для s4meone Посмотреть профиль Найти все сообщения от s4meone
 
Регистрация: 07.06.2020
Сообщений: 15

Проблема с Drag n Drop и bgcolor
<!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. Не могли бы пожалуйста помочь заставить работать правильно эту зласчастную кнопку?
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2020, 18:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от s4meone
не передаётся backgroundColor
меняйте логику, используйте class или data-color или data-index, для проверки установленного цвета, но забудьте про

style.backgroundColor == ccc[ccc.length - 1])
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2020, 19:22
Интересующийся
Отправить личное сообщение для s4meone Посмотреть профиль Найти все сообщения от s4meone
 
Регистрация: 07.06.2020
Сообщений: 15

С самим Drag'n'drop'ом всё в порядке? Думал, что в нём проблема. Можно немного разъяснить про data-color, data-index? Первый раз имею с ними дело
Ответить с цитированием
  #4 (permalink)  
Старый 17.11.2020, 19:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

собери радугу
Сообщение от s4meone
нужно в левом ряду выставить цвета радуги.
<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 17.11.2020, 19:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от s4meone
Можно немного разъяснить про data-color, data-index?
Нестандартные атрибуты, dataset
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оборачивать каждый звгружаемый файл drag and drop в свой собственный div Kurt_D_Cobain jQuery 21 29.01.2020 20:46
Криво работает drag & drop Dark Souls jQuery 6 06.03.2017 22:32
ищу Drag & drop плагин для построения плана помещения Den Brown Элементы интерфейса 0 31.07.2015 19:23
drag & drop , html 5 cyber Events/DOM/Window 1 30.06.2012 15:16
Drag & Drop с несколькими элементами Katz Общие вопросы Javascript 1 29.07.2011 13:01