Элементы возвращаются неправильно

@Halland · Регистрация: 19.04.2021

Студворк — интернет-сервис помощи студентам

Мне нужна ваша помощь. Моя задача состоит в том, чтобы создать 100 div с помощью чистого JavaScript. Каждый div должен обладать следующей функциональностью: Каждый div имеет свое название, типа div1, div2, div3 и до 100. Предположим, зову я на 31, 45, 89, они перемещаюсь наверх. Теперь элементы у меня становятся

div89, div45, div31, div1, div2

и на месте тех, которые я забрал, идут:

div30 - div32 - div33,
div43 -div44 - div46
div88 – div90 – div91

Когда я щелкаю еще раз на поднявшиеся наверх элементы, они должны вернуться на предыдущие позиции.

Проблема заключается в том, что они возвращаюсь назад, но в произвольные места списка (иногда нормально, иногда нет) и список у меня не выглядит поочередно. Где моя ошибка? Спасибо вам большое

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
document.addEventListener('DOMContentLoaded', function() {
    for (let i = 1; i <= 100; i++) {
        const div = document.createElement('div');
        div.className = 'div-element';
        div.textContent = 'div' + i;
        document.body.appendChild(div);
    }
 
    const originalPositions = Array.from(document.getElementsByClassName('div-element')).map((div, index) => index);
 
    const divElements = document.getElementsByClassName('div-element');
    for (let i = 0; i < divElements.length; i++) {
        const div = divElements[i];
        let isFirstPosition = false;
        let originalPosition = -1;
 
        div.addEventListener('click', function() {
            if (!isFirstPosition) {
                document.body.insertBefore(div, document.body.firstElementChild);
                isFirstPosition = true;
                originalPosition = i;
            } else {
                const referenceDiv = divElements[originalPositions[originalPosition]];
                document.body.insertBefore(div, referenceDiv.nextElementSibling);
                isFirstPosition = false;
            }
        });
    }
});

@mr_dramm · 12.07.2023, 22:06

Потому что ты работаешь с индексами массива

Пример
1 2 3 4 5 6
допустим мы переместили вперед 6 5 4, т.е. сначала 6 потом 5 потом 4
4 5 6 1 2 3

Для красоты демонстрации я считаю позиции/индекс элемента в массиве originalPositions не снуля как у тебя в коде а с 1, т.е. во второй строке это позиция а в первой значение
6 вернули на место
4 5 1 2 3 6 - значения
1 2 3 4 5 6 - индексы
4 вернули
5 1 2 4 3 6 - значения
1 2 3 4 5 6 - индексы
5 вернули
1 2 4 3 5 6 - значения
1 2 3 4 5 6 - индексы

итого после всех возвратов получили 1 2 4 3 5 6 вместо 1 2 3 4 5 6
нужно перемещать элементы сравнивая значения, а не инндексы, ты только что продемострировал проблемы которую решает key в react

@Halland · 12.07.2023, 22:24 **[ТС]**

Спасибо большое, однако я это задача для чистого js. Можете помочь мне это исправить? Буду очень благодарен

@klyapa · 13.07.2023, 00:36

Сообщение от Halland

это задача для чистого js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const container = document.body.appendChild(document.createElement('div'));
 
[...Array(100).keys()].forEach(i => {
    let div = container.appendChild(document.createElement('div'));
    
    div.classList.add('div-element');
    div.textContent = `div_${++i}`;
    
    Object.assign(div.style, {
        cursor: 'pointer',
        margin: '5px 0',
        padding: '3px',
        textAlign: 'center',
        border: '1px solid green',
        borderRadius: '4px',
        boxSizing: 'border-box',
        backgroundColor: '#D8D8B1'
    });
});
 
container.addEventListener(
    'click',
    e => e.target.classList.contains('div-element') ? container.prepend(e.target) : null
);

Добавлено через 3 минуты

Сообщение от Halland

Когда я щелкаю еще раз на поднявшиеся наверх элементы, они должны вернуться на предыдущие позиции.

До этого я ещё не дочитал...

@klyapa · 13.07.2023, 20:50

Дочитал...
Halland, задача в таком виде нерешаема, т.к. нет критерия очерёдности повторных кликов. Вот эта твоя фраза...

Сообщение от Halland

Когда я щелкаю еще раз на поднявшиеся наверх элементы, они должны вернуться на предыдущие позиции.

Замечательно. Теперь давай определись, где эта предыдущая позиция? Какбэ всё говорит о том, что это его стартовая, индексная позиция в коллекции. Допустим поставили элемент на своё место. А если ты нащёлкал перед этим кучу других элементов в рандомном порядке и они поднялись наверх, то при повторном клике они сдвинут элемент, ранее поставленный на место, и он в итоге окажется не на своём месте.

Если тебя устроит вот такое, то держи ... поклацай, подумай

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const container = document.body.appendChild(document.createElement('div'));
const getElems = box => [...box.querySelectorAll('*')];
 
[...Array(100).keys()].forEach(i => {
    let div = container.appendChild(document.createElement('div'));
    
    div.classList.add('div-element');
    div.dataset.index = i;
    div.textContent = `div${++i}`;
    
    Object.assign(div.style, {
        cursor: 'pointer',
        margin: '5px 0',
        padding: '3px',
        textAlign: 'center',
        border: '1px solid green',
        borderRadius: '4px',
        boxSizing: 'border-box',
        backgroundColor: '#D8D8B1'
    });
});
 
container.addEventListener('click', function (e) {
    if(!e.target.classList.contains('div-element')) return;
    
    if(e.target.classList.contains('off')) {
        getElems(this).find((_, i) => e.target.dataset.index == i).insertAdjacentElement(
            'afterEnd',
            e.target
        );
    } else {
        this.prepend(e.target);
    }
    
    e.target.classList.toggle('off');
});

@Hmms · 13.07.2023, 23:16

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Создаем 100 div элементов с уникальными именами
var container = document.getElementById("container");
for (var i = 1; i <= 100; i++) {
    var div = document.createElement("div");
    div.classList.add("box");
    div.id = "div" + i;
    div.innerHTML = "div" + i;
    container.appendChild(div);
}
 
// Функция перемещения выбранного элемента наверх или вниз
function moveElement(element) {
    var originalPos;
  
    // Если элемент уже был выбран
    if (element.classList.contains("selected")) {
        // Возвращаем его на оригинальное место
        originalPos = element.dataset.originalPos;
        container.insertBefore(element, container.children[parseInt(originalPos) + 1]);
        element.classList.remove("selected");
    } else {
        // Добавляем элемент наверх
        originalPos = Array.from(container.children).indexOf(element);
        element.dataset.originalPos = originalPos;
        container.insertBefore(element, container.firstChild);
        element.classList.add("selected");
    }
}
 
// Добавляем обработчики событий клика на каждый div элемент
var divs = document.querySelectorAll(".box");
divs.forEach(function(div) {
    div.addEventListener("click", function() {
        moveElement(div);
    });
});

Добавлено через 1 минуту

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>Divs</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: #ccc;
            display: inline-block;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>

Добавлено через 1 минуту
Суть в том, что при первом клике идёт запись в атрибут оригинальной позиции, и добавляется класс selected (можно и без него). А при повторном клике, идёт перемещение на обратную позицию из атрибута.

Ничего сложного

Добавлено через 4 минуты
А я понял в чём проблема

@klyapa · 13.07.2023, 23:53

Сообщение от mr_dramm

нужно перемещать элементы сравнивая значения, а не инндексы

Это тот же хрен, только тень слева и задачу не решит.

@Hmms · 13.07.2023, 23:58

Сообщение от klyapa

Это тот же хрен, только тень слева и задачу не решит.

Проблема задачи состоит в том, что при выборе несколько значений. Остальные div сдвинулись. И ранее записанная индексация, уже не будет верна по отношению к другим. Неважно каким образом была записана другая позиция.

@klyapa · 14.07.2023, 00:36

Сообщение от Hmms

Ничего сложного

угу

Сообщение от Hmms

А я понял в чём проблема

уже лучше

Сообщение от Hmms

Проблема задачи состоит в том, что при выборе несколько значений. Остальные div сдвинулись. И ранее записанная индексация, уже не будет верна по отношению к другим. Неважно каким образом была записана другая позиция.

да ... причём, если искать элементы по значению, чтобы правильно вставить event.target, то тоже получим баг, только с другим алгоритмом, нежели баг с индексами

@Hmms · 14.07.2023, 00:45

Можно немного по другому решить задачу, всё таки сделать начальную метку. А потом бегать, и искать от куда родом данный div

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// Создаем 100 div элементов с уникальными именами
var container = document.getElementById("container");
for (var i = 1; i <= 100; i++) {
    var div = document.createElement("div");
    div.classList.add("box");
    div.id = "div" + i;
    div.innerHTML = "div" + i;
    div.dataset.originalPos = i - 1;
    container.appendChild(div);
}
 
// Функция перемещения выбранного элемента наверх или вниз
function moveElement(element) {
   if (element.classList.contains("selected")) {
      let originalPos = parseInt(element.dataset.originalPos);
      let MoveIndex = container.children.length;
     
      for (let i = 0; i < MoveIndex; i++) {
        let currentDiv = container.children[i];
         if(!currentDiv.classList.contains("selected")
            && originalPos <= parseInt(currentDiv.dataset.originalPos)) {
            MoveIndex = i;
           break;
          } 
      }
       container.insertBefore(element, container.children[MoveIndex]); 
       element.classList.remove("selected");
   } else {
        container.insertBefore(element, container.firstChild);
        element.classList.add("selected");
   }
}
 
// Добавляем обработчики событий клика на каждый div элемент
var divs = document.querySelectorAll(".box");
divs.forEach(function(div) {
    div.addEventListener("click", function() {
        moveElement(div);
    });
});

Этот код решает проблему

@klyapa · 14.07.2023, 01:48

Сообщение от Hmms

Можно немного по другому решить задачу

ну да, по-другому можно...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const box = document.body.appendChild(document.createElement('div'));
 
[...Array(100).keys()].forEach(i => {
    let div = box.appendChild(document.createElement('div'));
    div.classList.add('div-element');
    div.dataset.sel = i;
    div.textContent = `div${++i}`;
    
    Object.assign(div.style, {
        cursor: 'pointer',
        margin: '5px 0',
        padding: '3px',
        textAlign: 'center',
        border: '1px solid green',
        borderRadius: '4px',
        boxSizing: 'border-box',
        backgroundColor: '#D8D8B1'
    });
});
 
box.addEventListener('click', function (e) {
    if(!e.target.classList.contains('div-element')) return;
    if(e.target.classList.contains('off')) {
        this.querySelector(`[data-mark="${e.target.dataset.sel}"]`).replaceWith(e.target);
    } else {
        let s = document.createElement('span');
        s.dataset.mark = e.target.dataset.sel;
        e.target.after(s);
        this.prepend(e.target);
    }
    e.target.classList.toggle('off');
});

@Hmms · 14.07.2023, 02:46

Сообщение от klyapa

ну да, по-другому можно...

Да, тоже неплохой вариант, создать span невидимый. И потом возвращать оригинальную тушку на место его

@mr_dramm · 14.07.2023, 11:33

Сообщение от klyapa

Это тот же хрен, только тень слева и задачу не решит.

я уверен что этот "хрен" должен справиться, так, как если бы проверялись значения, а именно последовательность цифр в div.innerText, которая по условию должна быть отсортирована по возрастанию, и таким образом ты не вставишь 4 перед 3, если правильно напишешь проход(поиск места вставки) и вставку. Сложность задачи от O(1) до O(logN), можно считать число перемещенных элементов в начало списка, тогда оставшиеся это отсортированный массив с пропусками, в котором для поиска места вставки предлагаю использовать используем бинарный поиск.

@klyapa · 15.07.2023, 01:07

Сообщение от mr_dramm

я уверен что этот "хрен" должен справиться, так, как если бы проверялись значения, а именно последовательность цифр в div.innerText

Пример с innerText (значение)

Code
1
1 2 3 4 5 6

допустим мы переместили вперед 2 3 4, т.е. сначала 2 потом 3 потом 4
имеем на выхлопе...

Code
1
4 3 2 1 5 6

Теперь перемещаем обратно. Для "красоты демонстрации"* перемещаем текущий элемент за меньшую цифру (на 1)
То есть, жмём на 3 и элемент перемещается под двойку... У нас ведь нет чёткого критерия последовательности, какой элемент возвращать на место, так что рандомно жмём тройку...

Code
1
4 2 3 1 5 6

Дальше двойку клацаем ... перемещается под единицу

Code
1
4 3 1 2 5 6

Остаётся четвёрка, которая переместится под тройку. И что имеем? А имеем тот самый "хрен", о котором упомянул выше

Code
1
3 4 1 2 5 6

@mr_dramm · 15.07.2023, 01:53

Сообщение от klyapa

Теперь перемещаем обратно. Для "красоты демонстрации"* перемещаем текущий элемент за меньшую цифру (на 1)
То есть, жмём на 3 и элемент перемещается под двойку... У нас ведь нет чёткого критерия последовательности, какой элемент возвращать на место, так что рандомно жмём тройку...

klyapa, спасибо тебе за ответ, я извиняюсь за неясное толкование своего решения попробую объяснить, правильная последовательность после клику по 3 будет

4 2 1 3 5 6

Сообщение от mr_dramm

Сложность задачи от O(1) до O(logN), можно считать число перемещенных элементов в начало списка, тогда оставшиеся это отсортированный массив с пропусками, в котором для поиска места вставки предлагаю использовать используем бинарный поиск.

"можно" лучше заменить на "нужно", т.е. место вставки будет только в тот набор который не участвовал в перемещении(оставшиеся это отсортированный массив), т.е. первая цифра, которая не перемещалась в данном случае 1, и с нее начнется поиск места вставки.

после этого у нас будет снова два массива, массивы условно разделены пременной счетчиком который будет равен 2 (до клика по 3 был равен 3), на самом деле это один массив точнее HTMLCollection

4 2(отсюда можно брать и сюда можно перемещать новые элементы) и 1 3 5 6 (тут ищем место вставки и вставляем)

@Hmms · 15.07.2023, 11:01

Сообщение от mr_dramm

"можно" лучше заменить на "нужно", т.е. место вставки будет только в тот набор который не участвовал в перемещении(оставшиеся это отсортированный массив), т.е. первая цифра, которая не перемещалась в данном случае 1, и с нее начнется поиск места вставки.

Более правильная реализация, с данным алгоритмом

PHP
1
2
3
4
5
6
7
8
    for (let i = 0; i < MoveIndex; i++) {
        let currentDiv = container.children[i];
         if(!currentDiv.classList.contains("selected")
            && originalPos <= parseInt(currentDiv.dataset.originalPos)) {
            MoveIndex = i;
           break;
          } 
      }

Только мы определяем, что у нас нету класса selected.

@mr_dramm · 15.07.2023, 12:59

не хочу спорить на счет правильно не правильно, просто потому что кто - то это сказал...
у тебя тоже есть подсчет перемещенных/выбранных(selected) элементов, только другим способом...

@Hmms · 15.07.2023, 15:47

Сообщение от mr_dramm

не хочу спорить на счет правильно не правильно

Я написал что - более правильная.

Сообщение от mr_dramm

просто потому что кто - то это сказал...

Логика сказала -

Данный код отлично решает задачу перемещения выбранного элемента наверх или вниз. В данном случае, код использует цикл for, чтобы найти правильное место для перемещения выбранного элемента.

В цикле проходится по каждому дочернему элементу контейнера и проверяет условие: если текущий элемент не содержит класс "selected" (то есть не является выбранным) и его оригинальная позиция (originalPos) больше или равна оригинальной позиции выбранного элемента, то запоминается индекс этого элемента в переменную MoveIndex.

После завершения цикла, выбранный элемент перемещается перед элементом с индексом MoveIndex с помощью container.insertBefore(). Затем выбранный элементу удаляется класс "selected", чтобы он больше не считался выбранным.

Если элемент не является выбранным, то он просто перемещается в начало контейнера с помощью container.insertBefore() и добавляется класс "selected".

Таким образом, этот код эффективно перемещает выбранный элемент наверх или вниз, основываясь на его оригинальной позиции и манипулируя DOM.

Сообщение от mr_dramm

только другим способом...

Приведи рабочий пример и ты

@mr_dramm · 18.07.2023, 13:28

я придумал альтернативное решение

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
    .box {
        display: flex;
        justify-content: center;
        gap: .5rem;
    }
 
    .item {
        padding: 1rem;
        border: 1px black solid;
        cursor: pointer;
        user-select: none;
    }
 
    .item[style] {
        background: orange;
 
    }
    </style>
</head>
 
<body>
    <div class="box">
    </div>
    <script>
    const box = document.querySelector(".box");
    for (let i = 1; i <= 10; i++) {
        const div = document.createElement('div');
        div.className = 'item';
        div.textContent = i;
        document.querySelector(".box").appendChild(div);
    }
    let counter = 0;
    box.addEventListener("click", (e) => {
        const t = e.target
        if(!t.classList.contains("item")) return;
        if(t.hasAttribute("style")){
            t.removeAttribute("style")
        }
        else{
            t.style.order = --counter
        }
    })
    </script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	12.07.2023, 22:06
	Потому что ты работаешь с индексами массива Пример 1 2 3 4 5 6 допустим мы переместили вперед 6 5 4, т.е. сначала 6 потом 5 потом 4 4 5 6 1 2 3 Для красоты демонстрации я считаю позиции/индекс элемента в массиве originalPositions не снуля как у тебя в коде а с 1, т.е. во второй строке это позиция а в первой значение 6 вернули на место 4 5 1 2 3 6 - значения 1 2 3 4 5 6 - индексы 4 вернули 5 1 2 4 3 6 - значения 1 2 3 4 5 6 - индексы 5 вернули 1 2 4 3 5 6 - значения 1 2 3 4 5 6 - индексы итого после всех возвратов получили 1 2 4 3 5 6 вместо 1 2 3 4 5 6 нужно перемещать элементы сравнивая значения, а не инндексы, ты только что продемострировал проблемы которую решает key в react 1

@Halland 1 / 1 / 0 Регистрация: 19.04.2021 Сообщений: 44
	12.07.2023, 22:24 [ТС]
	Спасибо большое, однако я это задача для чистого js. Можете помочь мне это исправить? Буду очень благодарен 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	15.07.2023, 12:59
	не хочу спорить на счет правильно не правильно, просто потому что кто - то это сказал... у тебя тоже есть подсчет перемещенных/выбранных(selected) элементов, только другим способом... 0