Как сверстать списки в квадратах?

Question

Анна Емельянова @mckotello

HTML
CSS

Как сверстать списки в квадратах?

Добрый день. Дана таблица. В таблице мне нужно сделать два квадрата, в каждом список, и две стрелки между ними. Должно быть так: в каждом квадрате список, выбираю значения из списка в одном квадрате и с помощью нажатия на стрелку выбранный мною список переносится в другой квадрат. Это должно работать и в обратную сторону

Вопрос задан 17 янв.
108 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

Сергей delphinpro @delphinpro Куратор тега CSS

ну для начала все это нужно просто сверстать. С этим есть проблемы?

Написано 17 янв.

Анна Емельянова @mckotello Автор вопроса

Сергей delphinpro, вот код, но получилось это

<div class="container">
			<div class="square">
				<h2>1</h2>
				<ul id="list1">
					<li>Элемент 1</li>
					<li>Элемент 2</li>
					<li>Элемент 3</li>
				</ul>
			</div>
			<div class="arrows">
				<button onclick="moveItem('list1', 'list2')">→</button>
				<button onclick="moveItem('list2', 'list1')">←</button>
			</div>
			<div class="square">
				<h2>2</h2>
				<ul id="list2">
					<li>Элемент 4</li>
					<li>Элемент 5</li>
					<li>Элемент 6</li>
				</ul>
			</div>
		</div>

<style>
			.square {
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				display: inline-block;
				vertical-align: top;
				margin: 10px;
				padding: 10px;
			}
			.arrows {
				text-align: center;
				display: inline-block;
				vertical-align: top;
				margin: 10px;
				font-size: 24px;
			}
			ul {
				padding: 0;
			}
			li {
				list-style: none;
				cursor: pointer;
			}
		</style>

Написано 17 янв.

andy_bro @andy_bro
Квадрат 1

Элемент 1

Элемент 2

Элемент 3

Элемент 4

➡
⬅

Квадрат 2

Элемент 4

Элемент 5

Элемент 6

Элемент 7
Написано 18 янв.

Решения вопроса 1

2 комментария

andy_bro @andy_bro

document.addEventListener('DOMContentLoaded', function() {
    const list1 = document.getElementById('list1');
    const list2 = document.getElementById('list2');
    const toRightButton = document.getElementById('toRight');
    const toLeftButton = document.getElementById('toLeft');

    // Функция для перемещения элементов из одного списка в другой
    function moveItem(sourceList, targetList) {
        const selectedItems = sourceList.querySelectorAll('.selected');
        selectedItems.forEach(function(item) {
            item.classList.remove('selected');
            targetList.appendChild(item);
        });
    }

    // Обработчики событий для кнопок перемещения вправо и влево
    toRightButton.addEventListener('click', function() {
        moveItem(list1, list2);
    });

    toLeftButton.addEventListener('click', function() {
        moveItem(list2, list1);
    });

    // Обработчики событий для выбора элементов в списке
    list1.addEventListener('click', function(e) {
        const selectedItem = e.target;
        if (selectedItem.tagName === 'LI') {
            selectedItem.classList.toggle('selected');
        }
    });

    list2.addEventListener('click', function(e) {
        const selectedItem = e.target;
        if (selectedItem.tagName === 'LI') {
            selectedItem.classList.toggle('selected');
        }
    });
});

Написано 18 янв.

andy_bro @andy_bro

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Перемещение элементов</title>
</head>
<body>
    <div class="container">
        <div class="box" id="box1">
            <h2>Квадрат 1</h2>
            <ul id="list1" class="list">
                <li>Элемент 1</li>
                <li>Элемент 2</li>
                <li>Элемент 3</li>
                <li>Элемент 4</li>
            </ul>
        </div>
        <div class="arrows">
            <button id="toRight">➡</button>
            <button id="toLeft">⬅</button>
        </div>
        <div class="box" id="box2">
            <h2>Квадрат 2</h2>
            <ul id="list2" class="list">
                <li>Элемент 4</li>
                <li>Элемент 5</li>
                <li>Элемент 6</li>
                <li>Элемент 7</li>
            </ul>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Написано 18 янв.

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 2 часа назад
- 2 просмотра
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- 4 часа назад
- 25 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 16 часов назад
- 60 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 17 часов назад
- 102 просмотра
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- вчера
- 102 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- вчера
- 113 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 22 дек.
- 83 просмотра
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- 21 дек.
- 70 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 33 просмотра
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 71 просмотр
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Разработать принципиальную схему в Altium Designer

24 дек. 2024, в 03:48

3000 руб./за проект

Написать код для мобильного редактора видео, записываемого с камер

23 дек. 2024, в 23:22

15000 руб./за проект

UI/UX-дизайнер для разработки кликабельного интерфейса в Figma

23 дек. 2024, в 23:09

100000 руб./за проект

ну для начала все это нужно просто сверстать. С этим есть проблемы?
Сергей delphinpro, вот код, но получилось это

<div class="container"> <div class="square"> <h2>1</h2> <ul id="list1"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> <div class="arrows"> <button onclick="moveItem('list1', 'list2')">→</button> <button onclick="moveItem('list2', 'list1')">←</button> </div> <div class="square"> <h2>2</h2> <ul id="list2"> <li>Элемент 4</li> <li>Элемент 5</li> <li>Элемент 6</li> </ul> </div> </div>

<style> .square { width: 200px; height: 200px; border: 1px solid #000; display: inline-block; vertical-align: top; margin: 10px; padding: 10px; } .arrows { text-align: center; display: inline-block; vertical-align: top; margin: 10px; font-size: 24px; } ul { padding: 0; } li { list-style: none; cursor: pointer; } </style>
Квадрат 1

Элемент 1

Элемент 2

Элемент 3

Элемент 4

➡
⬅

Квадрат 2

Элемент 4

Элемент 5

Элемент 6

Элемент 7

Answer 1 · 2024-01-18 02:15:26

body {
font-family: Arial, sans-serif;
}

.container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

.box {
border: 1px solid #ccc;
padding: 10px;
width: 40%;
text-align: center;
}

h2 {
margin: 0;
}

.list {
list-style-type: none;
padding: 0;
}

.list li {
margin: 5px 0;
cursor: pointer;
transition: background-color 0.3s, font-weight 0.3s;
}

.list li.selected {
background-color: #f0f0f0;
font-weight: bold;
}

.arrows {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20%;
}

button {
font-size: 24px;
margin: 10px 0;
padding: 5px 10px;
cursor: pointer;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
}

Как сверстать списки в квадратах?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт