Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как стартовать ф-цию по двум event-ам: onmousedown и onmousemove 
:(
    Опции темы
Michael.de
Дата 13.8.2008, 18:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 9
Всем добрый день smile

Есть простой код:
Код

<html>
<head>
<script type="text/javascript">

function init(){
 var div1, div2, div3;
 div1=createObject(document.body, 'div', 'absolute', 100, 100, 300, 300, 'FFDDDD');
 div2=createObject(div1, 'div', 'absolute', 50, 50, 30, 30, 'DDFFDD');
 div2.onmousedown=move;
 div3=createObject(div1, 'div', 'absolute', 200, 200, 30, 30, 'DDDDFF');
 // onmousedown && onmousemove
 div3.onmousedown=move;
}

function createObject(pa, el, p, l, t, w, h, c){
 var e='px', o=document.createElement(el);
 if (p!=null) o.style.position=p;
 if (l!=null) o.style.left=l+e;
 if (t!=null) o.style.top=t+e;
 if (w!=null) o.style.width=w+e;
 if (h!=null) o.style.height=h+e;
 if (c!=null) o.style.backgroundColor=c;
 pa.appendChild(o);
 return o;
}

function move(){
 // dummy :)
 alert(this.style.top);
}
</script>
</head>
<body onload='init()'>
</body>
</html>

В нём ф-ция move() стартует при нажатии на любой из маленьких div-ов. А как мне её заставить запускаться при нажатии и перетаскивании (не отпуская) мыши?
Мне просто нужно осуществить перетаскивание объектов, а актуальные координаты мыши я получу через clientX и clientY.
PM MAIL   Вверх
krundetz
Дата 14.8.2008, 10:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Вечный странник
***


Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69
обычно вашу задачу разделяют на три этапа
1 этап нажата кнопка на какомто блоке
мы запускаем по этому событию функцию которая нам создает флаг кнопка такая то нажата
2 этап пермешение мыши
мы отслеживаем перемешение мыши при помощи другой функции которая каждый раз при запуске проверяет флаги и если какой то из флагов включен то пермещает блок
3 этап клавиша отпушина
запускается функция которая обнуляет флаг и премешение блока прекрашается


--------------------
!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород
user posted image
PM MAIL   Вверх
Michael.de
Дата 14.8.2008, 14:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 9
krundetz, со вспомогательным boolean согласен, спасибо smile
У меня вопрос по 2 этапу: ф-ция, отслеживающая перемещение мыши... получается она должна быть "фоновым" процессом {через window.setInterval() например} ? Или как это ещё реализовать? smile
PM MAIL   Вверх
Sanchezzz
  Дата 14.8.2008, 15:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
 посмотри тут 


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
krundetz
Дата 14.8.2008, 15:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Вечный странник
***


Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69
Michael.de, нет window.setInterval() не обязательно использовать

достаточно повесить функцию обработчик на событие перемещение мышы

И обязательно посмотрите на ссылку приведенную Sanchezzz, та показан пример использования скрипт пермешения и дана ссылка на скрипт и обяснение как он работает.

Это сообщение отредактировал(а) krundetz - 14.8.2008, 15:09


--------------------
!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород
user posted image
PM MAIL   Вверх
Michael.de
Дата 14.8.2008, 16:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 9
Sanchezzz, krundetz: посмотрел ссылку. Добавил листинг ф-ций dragObject() и Position() ... не пашет :/
Попробую сам что-нибудь сочинить... потом отпишусь smile

P.S. Нашёл работающий пример от 12345c в >>этой<< теме... разбираюсь smile

Это сообщение отредактировал(а) Michael.de - 14.8.2008, 19:03
PM MAIL   Вверх
Michael.de
Дата 14.8.2008, 23:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 9
Чуть переделанный пример из первого поста:
Код

<html>
<head>
<script type="text/javascript">
var clicked, over;
function init(){
 var div1, div2, div3;
 div1=createObject(document.body, 'div', 'absolute', 100, 100, 300, 300, 'FFDDDD');
 div2=createObject(div1, 'div', 'absolute', 50, 50, 100, 100, 'DDFFDD');
 div2.innerHTML='Click here'
 addEvents(div2);
 div3=createObject(div1, 'div', 'absolute', 200, 200, 50, 50, 'DDDDFF');
}

function move(e){
 // dummy :)
 if (over && clicked) alert(e||window.event);
}

function addEvents(obj){
 obj.onmouseover=function(){over=true;};
 obj.onmouseout=function(){over=false;}
 obj.onmousedown=function(){clicked=true;}
 obj.onmouseup=function(){clicked=false;}
}

function createObject(pa, el, p, l, t, w, h, c){
 var e='px', o=document.createElement(el);
 if (p!=null) o.style.position=p;
 if (l!=null) o.style.left=l+e;
 if (t!=null) o.style.top=t+e;
 if (w!=null) o.style.width=w+e;
 if (h!=null) o.style.height=h+e;
 if (c!=null) o.style.backgroundColor=c;
 pa.appendChild(o);
 return o;
}
</script>
</head>
<body onload='init();' onmousemove='move(event);'>
</body>
</html>

добавил обработчики (onmouseover, onmouseout, onmousedown, onmouseup и onmousemove) и две константы: clicked (нажато/отжато) и over (сверху/за пределами).
Вопрос: Почему, когда я кликаю и тащу мышь по квадрату с надписью (я повесил обработчики только на него), а затем отпускаю её, ф-ция висящая на object.onmouseup=function(){clicked=false;} не срабатывает (23 стр.) - при дальнейшем движении мыши (и при отпущенной кнопке!!) выскакивает alert() из ф-ции move(), хотя там в 16 стр. чётко прописано:
if (over && clicked) ... ????
Это же какая-то мистика smile

Это сообщение отредактировал(а) Michael.de - 14.8.2008, 23:41
PM MAIL   Вверх
Sanchezzz
  Дата 15.8.2008, 08:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
ты наверное и по сайты не прошелся... 
вот все работает чуть ниже было решение всех проблем и крос-браузерное... ссылка


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Michael.de
Дата 15.8.2008, 18:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 9
Sanchezzz, да нет, видел я это решение, иначе не написал бы пару постов выше:
Цитата
... Добавил листинг ф-ций dragObject() и Position() ... не пашет :/
Мне бы моё решение доработать (из моего предыдущего поста). Тем более, что одна из версий уже пахала... правда там div перемещался только вправо-вниз - я не ловил разницу координат клика мыши и style.left и style.top div-а и при клике div "прилипал" левым-верхним углом к курсору smile
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0502 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.