jquery: Добавление обьекта - JavaScript, Ajax

Mr.Dmitry · 22.09.2013, 12:04

Всем привет. Столкнулся со следующей проблемой.

Мне нужно динамически добавлять div'ы, с указанием его место положения на странице(left, top)

Накидал следующий скрипт

html:

Код HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <script type="text/javascript" src="JavaScript/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="JavaScript/work.js"></script>
    <style>
      #work {width:100%; height:1000px;}
    </style>
	<body>       
   <div id="work"></div>
	</body>   
</html>

JS

Код:

    $(document).ready(function() {
  var click=0;      
     $("#work").click(function (e) {
     click=click+1;        
      ae=e||window.event;
       mX0 = e.clientX;
       mY0 = e.clientY-34;
       id = "test"+click;
         style ="#"+id+"{border:1px solid #000000; heigth:100px; width:100px; left:"+mX0+"px; top: "+mY0+"px; position:relative}"; 
         $('head').append('<style>'+style+'</style>');
         $('#work').append('<div id="'+id+'" class="class">text</div>');     
        });   
   });

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

PS в принципе почему так понятно, метод append создает новый элемент уже после имеющегося, но как тогда мне быть?

grominfo · 22.09.2013, 14:26

А тебе что, один на другой надо накладывать? Тогда используй position:absolute

Mr.Dmitry · 22.09.2013, 14:34

Спасибо, решено )

22.09.2013, 12:04	#1
Mr.Dmitry Пользователь Регистрация: 18.12.2006 Сообщений: 50	jquery: Добавление обьекта Всем привет. Столкнулся со следующей проблемой. Мне нужно динамически добавлять div'ы, с указанием его место положения на странице(left, top) Накидал следующий скрипт html: Код HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="JavaScript/jquery-1.9.1.js"></script> <script type="text/javascript" src="JavaScript/work.js"></script> <style> #work {width:100%; height:1000px;} </style> <body> <div id="work"></div> </body> </html> JS Код: `$(document).ready(function() { var click=0; $("#work").click(function (e) { click=click+1; ae=e\|\|window.event; mX0 = e.clientX; mY0 = e.clientY-34; id = "test"+click; style ="#"+id+"{border:1px solid #000000; heigth:100px; width:100px; left:"+mX0+"px; top: "+mY0+"px; position:relative}"; $('head').append('<style>'+style+'</style>'); $('#work').append('<div id="'+id+'" class="class">text</div>'); }); });` Таким способом элементы создаются в нужной области но при повторном клике, вновь созданный элемент как бы отталкивается от предыдущего на расстояние равное высоте предыдущего элемента. PS в принципе почему так понятно, метод append создает новый элемент уже после имеющегося, но как тогда мне быть? Последний раз редактировалось Mr.Dmitry; 22.09.2013 в 12:17.

22.09.2013, 14:26	#2
grominfo Форумчанин Регистрация: 30.05.2011 Сообщений: 651	А тебе что, один на другой надо накладывать? Тогда используй position:absolute Создание, программирование и сопровождение сайтов любой сложности. Изготовление программ на заказ. Список услуг и портфолио на сайте www.andreygrom.ru

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Добавление фонового рисунка через jQuery	J4SSektor	JavaScript, Ajax	3	11.03.2013 15:50
Расположение обьекта	jetei	Gamedev - cоздание игр: Unity, OpenGL, DirectX	3	15.12.2011 20:21
Тип обьекта	gvilon	Общие вопросы по Java, Java SE, Kotlin	1	22.10.2011 19:31
Изменение ссылки(добавление/обновление значения из input), на jquery	cergey251	JavaScript, Ajax	4	21.10.2011 16:42
Ссылка с обьекта	Lemo	HTML и CSS	0	07.04.2009 21:12

22.09.2013, 14:34	#3
Mr.Dmitry Пользователь Регистрация: 18.12.2006 Сообщений: 50	Спасибо, решено )