Клонирование объекта и помещение его на страницу с сохранением координат

@jin · Регистрация: 09.01.2015

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

Здравствуйте, кто нибудь будьте добры помогите решить следующую задачу: как обычную картинку определённого размера, помещать в любое место на странице браузера, сохраняя её координаты по клику на <button>, при этом, чтобы была возможность клонирования картинки, так же при клике по кнопке и помещения многих копий на страницу с сохранением их координат. Благодарю всех кто ответит.
P.S. java мне в новинку, так что на возможные встречные вопросы отвечу как смогу

@kalabuni · 06.06.2012, 15:10

1. Javascript работает в конкретном браузере конкретного компьютера конкретного пользователя.

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

3. Все прочие пользователи никоим образом не смогут что-либо узнать о том - сколько картинок размножено и в какие места страницы они помещены. Javascript по определению не может что-либо записать на сервере в файл, который будет доступен всем прочим пользователям. Это может сделать только программа на серверном языке (типа PHP, Perl, ASP...)
-----

Всё прочитали? Всё поняли?

Вам как раз надо, чтобы Вася из Урюпинска на своей страничке поразмножал картинку и поперемещал её и её клоны, и чтобы всё это васин браузер запомнил для того, чтобы когда завтра (или через неделю) Вася из Урюпинска снова зайдёт на страничку с этого же компьютера и через этот же браузер, то все картинки будут в тех местах, где Вася из Урюпинска их в прошлый раз "разбросал"? И при этом Федя из Магадана никогда не узнает - сколько там у Васи из Урюпинска картинок и где они расположены...

Если именно это вам требуется, то тогда укажите:
--что изначально имеется на странице (какая картинка, какие кнопки, есть ли что ещё на странице, кроме кнопок и картинки)
--каким именно образом вы представляете себе действия пользователя при клонировании картинки (куда надо конкретно нажать, чтобы появился клон и в каком именно месте страницы этот клон должен появиться)
--каким образом картинка (и её клоны) перемещаются в желаемые места (захватил мышкой и потащил? или ещё как?)
--когда пользователь установил на своё место клон #25, может ли он вернуться к клону #8 и изменить тому его место?
--если пользователь случайно создал "лишний" клон, он должен иметь возможность его удалить? какие действия для этого он должен совершить?
--в какой момент (по какому конкретному событию) расстановку клонов нужно считать "окончательно завершённой на этот сеанс", чтобы её сохранить?

@jin · 06.06.2012, 19:41

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

--что изначально имеется на странице (какая картинка, какие кнопки, есть ли что ещё на странице, кроме кнопок и картинки)
--каким именно образом вы представляете себе действия пользователя при клонировании картинки (куда надо конкретно нажать, чтобы появился клон и в каком именно месте страницы этот клон должен появиться)
--каким образом картинка (и её клоны) перемещаются в желаемые места (захватил мышкой и потащил? или ещё как?)
--когда пользователь установил на своё место клон #25, может ли он вернуться к клону #8 и изменить тому его место?
--если пользователь случайно создал "лишний" клон, он должен иметь возможность его удалить? какие действия для этого он должен совершить?
--в какой момент (по какому конкретному событию) расстановку клонов нужно считать "окончательно завершённой на этот сеанс", чтобы её сохранить?

Здравствуйте, для меня нет необходимости сохранения координат в какой то отдельный файл, будем исходить из того что с картинками будет работать один пользователь и сохранять результаты всех перетаскиваний в куки только для себя.

Есть просто интерактивная HTML форма которая производит манипуляции с БД. Хотелось бы поместить туда обыкновенную кнопку назовём её "добавить объект" по нажатии на которую будут выполняться условия клонирования картинки из папки(корневой или вынесенной), (предположим "100х60") и переход на другую страницу в которой фоном страницы будет план здания. В каком месте должен появиться клон хотелось бы чтоб под курсором, не знаю можно ли это реализовать, но готов довольствоваться и малым

После помещения объекта в какую то координату на странице, по нажатии на кнопку "сохранить" которая будет находиться в нижнем правом углу экрана объект должен зафиксироваться и перемещать его уже будет нельзя, только удалить(удаление мне бы хотелось сделать по наведению на помещённый уже объект курсора, нажатию "п.к.м." и выпаданию доп.функции в меню "удалить объект". Для перетаскивания объекта мышью, у меня есть небольшой скриптик "drag.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
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()

Вот из всего этого мне и остаеться добавить(клонировать), сохранить(координаты), или удалить(в любом исполнении

)
Не знаю есть ли смысл копипастить сюда исходник формы.

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .

@jin 0 / 0 / 1 Регистрация: 09.01.2015 Сообщений: 6

	Клонирование объекта и помещение его на страницу с сохранением координат 06.06.2012, 14:26. Показов 2020. Ответов 2 Метки нет (Все метки) Здравствуйте, кто нибудь будьте добры помогите решить следующую задачу: как обычную картинку определённого размера, помещать в любое место на странице браузера, сохраняя её координаты по клику на <button>, при этом, чтобы была возможность клонирования картинки, так же при клике по кнопке и помещения многих копий на страницу с сохранением их координат. Благодарю всех кто ответит. P.S. java мне в новинку, так что на возможные встречные вопросы отвечу как смогу 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	06.06.2012, 15:10
	1. Javascript работает в конкретном браузере конкретного компьютера конкретного пользователя. 2. Соответственно, любые перемещения/клонирования и затем сохранение этих манипуляций (посредством записи в куки) возможны только у этого конкретного пользователя в его конкретном компьютере и для этого конкретного браузера. 3. Все прочие пользователи никоим образом не смогут что-либо узнать о том - сколько картинок размножено и в какие места страницы они помещены. Javascript по определению не может что-либо записать на сервере в файл, который будет доступен всем прочим пользователям. Это может сделать только программа на серверном языке (типа PHP, Perl, ASP...) ----- Всё прочитали? Всё поняли? Вам как раз надо, чтобы Вася из Урюпинска на своей страничке поразмножал картинку и поперемещал её и её клоны, и чтобы всё это васин браузер запомнил для того, чтобы когда завтра (или через неделю) Вася из Урюпинска снова зайдёт на страничку с этого же компьютера и через этот же браузер, то все картинки будут в тех местах, где Вася из Урюпинска их в прошлый раз "разбросал"? И при этом Федя из Магадана никогда не узнает - сколько там у Васи из Урюпинска картинок и где они расположены... Если именно это вам требуется, то тогда укажите: --что изначально имеется на странице (какая картинка, какие кнопки, есть ли что ещё на странице, кроме кнопок и картинки) --каким именно образом вы представляете себе действия пользователя при клонировании картинки (куда надо конкретно нажать, чтобы появился клон и в каком именно месте страницы этот клон должен появиться) --каким образом картинка (и её клоны) перемещаются в желаемые места (захватил мышкой и потащил? или ещё как?) --когда пользователь установил на своё место клон #25, может ли он вернуться к клону #8 и изменить тому его место? --если пользователь случайно создал "лишний" клон, он должен иметь возможность его удалить? какие действия для этого он должен совершить? --в какой момент (по какому конкретному событию) расстановку клонов нужно считать "окончательно завершённой на этот сеанс", чтобы её сохранить? 1

Клонирование объекта и помещение его на страницу с сохранением координат

Решение