Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.12.2013, 12:07   #1
Silverstone
Пользователь
 
Регистрация: 13.12.2011
Сообщений: 75
По умолчанию Название div

Нужно как-то обозвать блоки div, которые создаются по клику. В действительности это граф, у которого необходимо пронумеровать вершины. Можно ли создать какой-то цикл, который бы при каждом создание div сам инкриминировал его id?
Вот что есть
Код:
var flag = false;
var shift_x;
var shift_y;
var cnt = 0;
var divcoord = { 'x' : [], 'y' : []};
var i = 0;


function myFunction()// создает див-блок
{
  cnt++;
  var round = document.createElement('div');
   round.style.width = '98px';
   round.style.height = '98px';
   round.style.backgroundImage = "url('round.png')";
   round.style.position = 'absolute';
   round.style.top = Math.random()*600;
   round.style.left = Math.random()*1100;
   round.id = cnt;
   round.onmousedown = function() {start_drag(round)};
   round.onmousemove = function() {dragIt(round)};    
   round.onmouseup = function() {end_drag(round)};  
   document.body.appendChild(round);
   
   round.style.left = parseInt(mouse.style.left)+20+'px'
  //mouse.onMouseDown=start_drag(mouse,event);
  //mouse.onMouseUp=end_drag(); 
  //mouse.onMouseMove=dragIt(mouse,event);

}
    
                  
                          
function start_drag(itemToMove,e)
{
 if(!e) e = window.event;
 flag=true;
 shift_x = e.clientX-parseInt(itemToMove.style.left);
 shift_y = e.clientY-parseInt(itemToMove.style.top);

    divcoord.x[i] = e.clientX;
    divcoord.y[i] = e.clientY;
    alert(e.clientX);

 if(e.stopPropagation) e.stopPropagation();
  else e.cancelBubble = true;
 if(e.preventDefault) e.preventDefault();
  else e.returnValue = false;
}
    
function end_drag(){ flag=false; }

function dragIt(itemToMove,e)
{
 if(!flag) return;
 if(!e) e = window.event;
  itemToMove.style.left = (e.clientX-shift_x) + "px";
  itemToMove.style.top = (e.clientY-shift_y) + "px";

 if(e.stopPropagation) e.stopPropagation();
  else e.cancelBubble = true;
 if(e.preventDefault) e.preventDefault();
  else e.returnValue = false;
}

function myFunction2()// создает канвас-линию
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
			canvas.moveTo(12, 15);
			canvas.lineTo(20, 90);
		canvas.stroke();
}
Код:
<html>
<head>
     <title>Title</title>
     <meta charset="utf-8">
<style type="text/css">
 block {
  position: absolute;
  right: 15px;
  bottom: 200px;
  border: 1px solid black;
  border-radius: 4px;
 }

 info {
  border: 1px solid black;
  border-radius: 4px;
  height:601px;
  width:200px;
  -webkit-transform:translate(1120px,-602px);
 }

 input {
  margin: 10px 0px 0px 10px;
  font-family: Courier;
 }

 square {
  position: absolute;
  top: 10px;
  left: 50px;
  background: green;
  width: 60px;
  height: 60px;
 }

</style>

</head>

<body>
<script type="text/javascript" src="draw.js"> </script> 


<div class="square" style="position:absolute; left:5px; top:5px;" onMouseDown="start_drag(this,event)" onMouseUp="end_drag()" onMouseMove="dragIt(this,event)"> 
 <img src="round.png"> 1 </div> 
    
<canvas id="canvas" width = "1330" height = "525"></canvas>

<p><button onclick="myFunction()"> Click me </button></p>
<p><button onclick="myFunction2()"> Click me 2 </button></p>
    
</body>
</html>
Silverstone вне форума Ответить с цитированием
Старый 11.12.2013, 12:36   #2
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

У вас же уже есть присваивание id'а:
Код:
round.id = cnt;
?

Кстати, можно использовать this, и тогда идентификаторы не понадобятся. Функция будет принимать элемент, на котором произошло какое-то событие (click, mousemove, etc).
^-.-^ My GitHub

Последний раз редактировалось Fenex; 11.12.2013 в 12:41.
Fenex вне форума Ответить с цитированием
Старый 11.12.2013, 13:50   #3
Silverstone
Пользователь
 
Регистрация: 13.12.2011
Сообщений: 75
По умолчанию

Цитата:
Сообщение от Fenex Посмотреть сообщение
У вас же уже есть присваивание id'а:
Код:
round.id = cnt;
?

Кстати, можно использовать this, и тогда идентификаторы не понадобятся. Функция будет принимать элемент, на котором произошло какое-то событие (click, mousemove, etc).
как мне тогда его id вывести, чтобы хотя бы в таком виде название можно было посмотреть
Изображения
Тип файла: png Безымянный.png (74.4 Кб, 128 просмотров)
Silverstone вне форума Ответить с цитированием
Старый 11.12.2013, 16:07   #4
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,054
По умолчанию

Вам просто айдишник вывисти надо в качестве содержимого блока?
Если я правильно понял, то смотрите. вы создаете объект:
Код:
cnt++;
  var round = document.createElement('div');
   round.style.width = '98px';
   round.style.height = '98px';
   round.style.backgroundImage = "url('round.png')";
   round.style.position = 'absolute';
   round.style.top = Math.random()*600;
   round.style.left = Math.random()*1100;
   round.id = cnt;
   round.onmousedown = function() {start_drag(round)};
   round.onmousemove = function() {dragIt(round)};    
   round.onmouseup = function() {end_drag(round)};
но у вас затруднение как в него что то написать. тогда допишите вот это еще одной строчкой:
Код:
 round.innerHTML=cnt;
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Старый 11.12.2013, 16:30   #5
Silverstone
Пользователь
 
Регистрация: 13.12.2011
Сообщений: 75
По умолчанию

Цитата:
Сообщение от Лубышев Посмотреть сообщение
Вам просто айдишник вывисти надо в качестве содержимого блока?
Если я правильно понял, то смотрите. вы создаете объект:
Код:
cnt++;
  var round = document.createElement('div');
   round.style.width = '98px';
   round.style.height = '98px';
   round.style.backgroundImage = "url('round.png')";
   round.style.position = 'absolute';
   round.style.top = Math.random()*600;
   round.style.left = Math.random()*1100;
   round.id = cnt;
   round.onmousedown = function() {start_drag(round)};
   round.onmousemove = function() {dragIt(round)};    
   round.onmouseup = function() {end_drag(round)};
но у вас затруднение как в него что то написать. тогда допишите вот это еще одной строчкой:
Код:
 round.innerHTML=cnt;
Оно. Спасибо!
Silverstone вне форума Ответить с цитированием
Старый 11.12.2013, 17:20   #6
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,054
По умолчанию

Я дольше вспоминал как на чистом яваскрипте это сделать без юзания либ типа JQuery... эх... совсем мы обленились с этими
s=$(this).html();
и
$(this).html('че хочу, то и пишу сюда');
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
с чего начать решение? Считать из файла название объемных геометрических фигур,вывести название,количество граней,рисунок (Delphi) леночка93 Помощь студентам 6 16.05.2013 13:14
Что нужно делать чтобы высота div зависила то дочурного div? Duddu HTML и CSS 2 25.04.2012 21:23
Как растянуть div на оставшуюся высоту родительского div'a? Gans.7 HTML и CSS 0 01.04.2012 10:55
как выровнить div внутри другого div'a по вертикали по центру Arassir HTML и CSS 4 12.03.2011 20:01
div тег как нижний слой для второго div тега dadli HTML и CSS 2 30.07.2010 01:12