Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.03.2009, 11:47
Новичок на форуме
Отправить личное сообщение для _NoName_ Посмотреть профиль Найти все сообщения от _NoName_
 
Регистрация: 05.03.2009
Сообщений: 5

Drug&Drop + всплывание события = проблемы =((
есть у нас вот такая страничка со скриптом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
.box1{
	position:absolute;
	top:100px;
	left:10px;
	width:50px;
	height:50px;
	border:1px solid black;
}

.box2{
	position:absolute;
	top:100px;
	left:300px;
	width:100px;
	height:100px;
	border:1px solid red;
}
</style>
<script>
function drag(element, event) {
    var startX = event.clientX; // получаем координаты там где произошло событие
	var startY = event.clientY;

	var origX = element.offsetLeft; // получаем координаты div можно было и через getElementById но во всех браузерах line-height(отступы и тд и тп) разные
	var origY = element.offsetTop;

    if (document.addEventListener) {     //Вминяемые браузеры   
        document.addEventListener("mousemove", move, true);
        document.addEventListener("mouseup", up, true);
    }
    else if (document.attachEvent) {  // IE
        element.setCapture( );
        element.attachEvent("onmousemove", move);
        element.attachEvent("onmouseup", up);
        element.attachEvent("onlosecapture", up);
    }
  
	// Прерываем дальнейшее распростронение
    if (event.stopPropagation) event.stopPropagation( ); 
    else event.cancelBubble = true;                      
	// предотвращаем выполнение действие по умолчанию (выделение в нашем случае)
    if (event.preventDefault) event.preventDefault( );   
    else event.returnValue = false;                   

    
    function move(event) {
        if (!event) event = window.event;  
        element.style.left = (event.clientX) + "px";// перетаскиваем
        element.style.top = (event.clientY) + "px"; 
        // Прерываем дальнейшее распростронение
        if (event.stopPropagation) event.stopPropagation( );  // Вминяемые браузеры
        else event.cancelBubble = true;                  // IE
    }

 
    function up(event) {
        if (!event) event = window.event;  // IE 
        // удоляем все события
        if (document.removeEventListener) { 
            document.removeEventListener("mouseup", up, true);
            document.removeEventListener("mousemove", move, true);
        }
        else if (document.detachEvent) {  
            element.detachEvent("onlosecapture", up);
            element.detachEvent("onmouseup", up);
            element.detachEvent("onmousemove", move);
            element.releaseCapture( );
        }

       //но вот тут нам как раз нужно чтобы события всплыли 
       // if (event.stopPropagation) event.stopPropagation( ); 
       // else event.cancelBubble = true;                 
    }
}

</script>
</head>

<body>
   
    
    
<div class='box1' onmousedown="drag(this, event);">
Тяни!!!
</div>

<div class='box2' onmouseup="javascript:alert(this);">
Давай Сюды!!!
</div>
</body>
</html>


Так вот идея такого скрипта очень бональна =))
Хочется тащить элемент div на другой div.
Мы тянем box1 на box2 в результате когда мы отпускаем клавишу мышки должно сработать событие применимое к box2 (вывести alert), это возможно так как в функции определяющей когда отпускается клавиша мыши всплывание событий разрешено.

И все бы вроде бы работает как хотелось.... но проблемы в IE =(((

у него ведь работа с событием мыши организуется по средствам setCapture( ); (видимо в нем и трабла)
IE не в какую не хочет получать события от box2, box1 перекрывает все =(((

Помогите решить проблемы !!!!!! Заранее благадарю =))


p.s.
Появилась так же идея реализовать это по средствам координат мыши после того как отпускается клавиша мыши, но это повлечет за собой создание DIV только через JS для того чтобы знать высоту и шируну объекта и тд и тп. Конечно же получается тривиальная задача попадания точки в область, но если представить что div'ов 1000 бедному JS придется все координаты хранить в памяти а эт не гуд =((

Может у кого еще появятся какие идеи =))
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2009, 14:09
...
Отправить личное сообщение для Zibba Посмотреть профиль Найти все сообщения от Zibba
 
Регистрация: 13.10.2008
Сообщений: 225

Сообщение от _NoName_
только через JS для того чтобы знать высоту и шируну объекта
А что мешает определить ее при помощи JS уже у созданного объекта?
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2009, 15:03
Новичок на форуме
Отправить личное сообщение для _NoName_ Посмотреть профиль Найти все сообщения от _NoName_
 
Регистрация: 05.03.2009
Сообщений: 5

Сообщение от Zibba Посмотреть сообщение
А что мешает определить ее при помощи JS уже у созданного объекта?
Хм а разве я не тоже самое написал.... Создаем объект в JS через apeendChild добовляем ему свойства и тд и тп

Просто нужно каждый раз считывать все координаты div'ов припроверке попал или нет.....
А эт не гуд вариант..... Нужно найти более рациональный =)))
Ответить с цитированием
  #4 (permalink)  
Старый 05.03.2009, 15:58
...
Отправить личное сообщение для Zibba Посмотреть профиль Найти все сообщения от Zibba
 
Регистрация: 13.10.2008
Сообщений: 225

Я имел ввиду что мешает определить (при помощи) высоту и ширину у уже созданного элемента (не при помощи JS).
document.getElementById('el').offsetHeight;
// или
document.getElementById('el').offsetWidth;
Ответить с цитированием
  #5 (permalink)  
Старый 05.03.2009, 16:47
Новичок на форуме
Отправить личное сообщение для _NoName_ Посмотреть профиль Найти все сообщения от _NoName_
 
Регистрация: 05.03.2009
Сообщений: 5

извини затупил =))
Эт конечно да(примерно это и имелл в виду, просто что то тупняк =) ), но всеравно нужно будет тыкаться по узлам и проверять попал или нет... Должен быть рациональней способ =))

Очень интересно как же можно в IE именно с событиями поиграться.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Явный вызов процедуры обработки события. supchik Общие вопросы Javascript 18 27.01.2009 12:16