Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Drug&Drop + всплывание события = проблемы =(( (https://javascript.ru/forum/events/2980-drug-drop-vsplyvanie-sobytiya-%3D-problemy-%3D.html)

_NoName_ 05.03.2009 12:47

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 придется все координаты хранить в памяти а эт не гуд =((

Может у кого еще появятся какие идеи =))

Zibba 05.03.2009 15:09

Цитата:

Сообщение от _NoName_
только через JS для того чтобы знать высоту и шируну объекта

А что мешает определить ее при помощи JS уже у созданного объекта?

_NoName_ 05.03.2009 16:03

Цитата:

Сообщение от Zibba (Сообщение 13720)
А что мешает определить ее при помощи JS уже у созданного объекта?

Хм а разве я не тоже самое написал.... Создаем объект в JS через apeendChild добовляем ему свойства и тд и тп

Просто нужно каждый раз считывать все координаты div'ов припроверке попал или нет.....
А эт не гуд вариант..... Нужно найти более рациональный =)))

Zibba 05.03.2009 16:58

Я имел ввиду что мешает определить (при помощи) высоту и ширину у уже созданного элемента (не при помощи JS).
document.getElementById('el').offsetHeight;
// или
document.getElementById('el').offsetWidth;

_NoName_ 05.03.2009 17:47

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

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


Часовой пояс GMT +3, время: 16:02.