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

@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()

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

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

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

	Клонирование объекта и помещение его на страницу с сохранением координат 06.06.2012, 14:26. Показов 2044. Ответов 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

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

Решение