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