VPF::Перемещение div по клику на него

djes92

Дата 22.4.2012, 18:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 22.4.2012

Репутация: нет
Всего: нет

хочу сделать так,чтобы div создавался скриптом,потом при нажатии('click') на этот div, он менял свои координаты ('random').
Получается сделать только 1ое перемещение, дальше на клик не реагирует div, подскажите пожалуйста как сделать так чтоб каждый раз перемещался по клику?
Заранее спасибо.

Код


//================createElem=================== взял в инэте код
function createElement(name, attrs, style, text,past_id,position,changed) {
    var parent = document.getElementsByTagName('BODY')[0];
    var e = document.createElement(name);
    if (attrs) {
        for (key in attrs) {
            if (key == 'class') {
                e.className = attrs[key];
            } else if (key == 'id') {
                e.id = attrs[key];
            } else {
                e.setAttribute(key, attrs[key]);
            }
        }
    }
    if (style) {
        for (key in style) {
            e.style[key] = style[key];
        }
    }
    if (text) {
        e.appendChild(document.createTextNode(text));
    }
    parent.appendChild(e);
    if(past_id){
          var old_elem = document.getElementById(past_id);
        if(position=='before'){            
            parent.insertBefore(e,old_elem)
        }else if(position=='after'){
            insertAfter(parent,e,old_elem);
        }
        if(changed!='' && changed==true){
            parent.removeChild(old_elem);
        }
    }
}
//=============================================
/*
name – название элемента;
attrs – атрибуты создаваемого элемента;
style – стили создаваемого элемента;
text – вставляемый текс;
past_id – id элемента, рядом с которым будет располагаться наш элемент;
position - может принимать два значения before,after;
changed – флаг, который принимает два значения true или false.Если этот параметр установлен в true, то произойдет замена старого элемента на новый;
*/
//
//
//
function ChangeHoma(top,left,past_id)
{
    
    createElement('div',
                 {'class':'myHomaClass','id':'myHoma','align':'center'},
                 {'width':'100px','height': '100px', 'background': '#3B9D00', 'color': '#fff','position':'absolute','z-index':'10','top':top,'left':left},
                  'my text',
                  '',
                  'before',
                 1);

                
}
function calcNewCord()
{



    x = Math.floor(Math.random()*(600-0)+0);
    y = Math.floor(Math.random()*(1367-0)+0);
    //alert("x="+x+"y="+y);
    document.getElementById('myHoma').parentNode.removeChild(document.getElementById('myHoma'));
    ChangeHoma(x,y,past_id);
    
}

    


var x = 0;
var y = 0;
var past_id = '';
ChangeHoma(x,y,past_id);
homa = document.getElementById('myHoma')
homa.addEventListener('click',calcNewCord,true)

Это сообщение отредактировал(а) Aliance - 25.4.2012, 10:57

Serious2008

Дата 22.4.2012, 18:30 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 294
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Попробуй после выполнения перемещения, добавить
return false;
Точно не знаю почему, но помоему должно помочь

а ещё почти уверен что эти два строки должны быть

Код


homa = document.getElementById('myHoma');
homa.addEventListener('click',calcNewCord,true);

Такого плана

Это сообщение отредактировал(а) Serious2008 - 22.4.2012, 18:33

djes92

Дата 22.4.2012, 18:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 22.4.2012

Репутация: нет
Всего: нет

спасибо за ответ, сейчас попробую)

Добавлено через 2 минуты и 29 секунд
ух ты!!! спасибо работает!! спасибо большое!!1

Serious2008

Дата 22.4.2012, 19:06 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 294
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

djes92,
а что из двух сработало, возвращение false или точки с запятыми?

djes92

Дата 22.4.2012, 19:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 22.4.2012

Репутация: нет
Всего: нет

аххаха)) я думал что вы посоветовали добавить еще 2 строчки)) я добавил в функцию CalcNewcord() в конец и заработало. return false роли не сыграло.

Код


homa = document.getElementById('myHoma');
homa.addEventListener('click',calcNewCord,true);

=)))

Это сообщение отредактировал(а) Aliance - 25.4.2012, 10:56

Serious2008

Дата 22.4.2012, 19:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 294
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

djes92,
там 2 последние строчки заменить надо было

djes92

Дата 22.4.2012, 19:45 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 22.4.2012

Репутация: нет
Всего: нет

я их не трогал) все заработало)

Aliance

Дата 25.4.2012, 11:00 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

В JS точка с запятой хоть и является хорошим тоном и привычкой, но не обязательна.

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

magelan

Дата 27.4.2012, 09:55 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 3
Всего: 16

остается один вопрос, нафига каждый раз делать и убивать новый див (что особенно проблематично для ДОМ), когда можно по клику просто менять координаты ?!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »