На клик перемещать фигуру по div-ам

@AGOUTI · Регистрация: 11.11.2016

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

Метод move() должен реализовывать перемещение фигуры на следующий div. Подскажите пожалуйста как это можно реализовать:

html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div id="myRect" onclick = "move();"></div>
        <div id="myAnotherRect" onclick = "move();"></div>
    </body>
    <script src="index.js"></script>
</html>

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
25
26
27
28
29
30
31
32
33
function Rect(width, height){
    this.width = width;
    this["height"] = height;
    this.show = function(id){
        var myrect = document.getElementById(id);
        myrect.style.width = this.width;
        myrect.style["height"] = this.height;
        myrect.style.backgroundColor = "red";
        myrect.style.position = "absolute";
        myrect.style.left = "100px";
        myrect.style.top = "200px";
    };
};
 
var firstRect = new Rect("100px", "200px");
firstRect.show("myRect");
var secondRect = new Rect("150px", "150px");
Rect.prototype.x = "300px";
Rect.prototype.y = "500px";
 
Rect.prototype.showINPosition = function(myAnotherRect){
    myRect = document.getElementById(myAnotherRect);
        this.show(myAnotherRect);
        myRect.style.top = this.y;
        myRect.Style.top = this.x;
    
};
 
//secondRect.show("myAnotherRect");
//console.log(Rect.prototype);
 
function move(){
}

@amr-now · 25.01.2019, 12:41

AGOUTI, это какой-то фейспалм.

Rect.prototype.x - что это было?
Прочитайте тему про нормальные классы и нормально создайте объект.

Добавлено через 8 минут
Задача то какая?
Перетаскивать вложенный элемент HTML по списку DIV ?
Или нарисовать звезду и перетаскивать эту звезду по списку DIV ?

Добавлено через 1 минуту
Или последовательно выпячивать каждый DIV из списка DIV ?

@EveKS · 25.01.2019, 16:36

AGOUTI, Так понимаю это учебные наработки, судя по
this.width this["height"] и не использование классов?
Т.е. есть какие-то ограничения по ES?

@amr-now · 25.01.2019, 16:56

EveKS, тут по top,left каждого div из списка надо проставить элемент с позиционированием absolute?
Тогда задача вообще не на объекты, а на понимание позиционирования на странице.
Бегающий div вообще можно изначально разместить невидимым в html-разметке.

@EveKS · 25.01.2019, 17:00

amr-now, я понял, что один див должен наехать на другой

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

myRect.style.top = this.y;
myRect.Style.top = this.x;

тут с Style и top top, вообще не уехать =)

И какое-то неприятное ограничение, использовать move и вызывать его из разметки страницы...

@amr-now · 25.01.2019, 17:02

EveKS, так и я пишу про наложение с выравниванием по левому верхнему углу.
move() - перескочить на следующий div, пока перескакивается.

Только задача решается сильно по-другому, даже не напоминая прежний скрипт.

@EveKS · 25.01.2019, 17:22

amr-now, эта задача AGOUTI

Добавлено через 17 минут
AGOUTI, постарался не менять код

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
function Rect(id, width, height) {
    this.id = id;
 
    this.width = width;
    this["height"] = height;
    this.x = "100px";
    this.y = "200px";
 
    this.show = function () {
        var myrect = document.getElementById(this.id);
        myrect.style.width = this.width;
        myrect.style["height"] = this.height;
        myrect.style.backgroundColor = "red";
        myrect.style.position = "absolute";
        myrect.style.left = this.x;
        myrect.style.top = this.y;
        myrect.style.translate = "all .8s";
    };
};
 
Rect.prototype.showInPosition = function (x, y) {
    this.x = x;
    this.y = y;
    this.show(myAnotherRect);
};
 
var firstRect = new Rect("myRect", "100px", "200px");
var secondRect = new Rect("myAnotherRect", "150px", "150px");
 
firstRect.show();
secondRect.showInPosition("10px", "10px");
 
function move(e) {
    if(e.target.id === firstRect.id) {
        firstRect.showInPosition(secondRect.x, secondRect.y);
    } else {
        secondRect.showInPosition(firstRect.x, firstRect.y);
    }
}

Добавлено через 23 секунды

HTML5
1
2
3
4
<body>
    <div id="myRect" onclick = "move(event);" style="background-color: blue"></div>
    <div id="myAnotherRect" onclick = "move(event);" style="background-color: red"></div>
</body>

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	25.01.2019, 12:41
	AGOUTI, это какой-то фейспалм. Rect.prototype.x - что это было? Прочитайте тему про нормальные классы и нормально создайте объект. Добавлено через 8 минут Задача то какая? Перетаскивать вложенный элемент HTML по списку DIV ? Или нарисовать звезду и перетаскивать эту звезду по списку DIV ? Добавлено через 1 минуту Или последовательно выпячивать каждый DIV из списка DIV ? 0

@EveKS 601 / 485 / 185 Регистрация: 19.04.2016 Сообщений: 1,885
	25.01.2019, 16:36
	AGOUTI, Так понимаю это учебные наработки, судя по `this.width this["height"]` и не использование классов? Т.е. есть какие-то ограничения по ES? 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	25.01.2019, 16:56
	EveKS, тут по top,left каждого div из списка надо проставить элемент с позиционированием absolute? Тогда задача вообще не на объекты, а на понимание позиционирования на странице. Бегающий div вообще можно изначально разместить невидимым в html-разметке. 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	25.01.2019, 17:02
	EveKS, так и я пишу про наложение с выравниванием по левому верхнему углу. move() - перескочить на следующий div, пока перескакивается. Только задача решается сильно по-другому, даже не напоминая прежний скрипт. 0

На клик перемещать фигуру по div-ам

Решение