<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
// Объявляем переменную, хранящую признак буксировки
var isDragging = false;
// Объявляем переменные, хранящие координаты курсора мыши
// относительно перетаскиваемого элемента страницы.
// Они понадобятся, чтобы скорректировать
// положение этого элемента относительно
var xd = 0;
var yd = 0;
// Объявляем переменные для хранения изначальных координат
// перетаскиваемого элемента
var xbegin = 0;
var ybegin = 0;
// Функция, проверяющая, попал ли перетаскиваемый элемент
// на один из элементов-"приемников"
function isReceived(pReceiver)
{
return ((contObject.offsetLeft >= pReceiver.offsetLeft) && (contObject.offsetLeft + contObject.offsetWidth <= pReceiver.offsetLeft + pReceiver.offsetWidth) && (contObject.offsetTop >= pReceiver.offsetTop) &&
(contObject.offsetTop + contObject.offsetHeight <= pReceiver.offsetTop + pReceiver.offsetHeight));
}
// Функция-обработчик события onMouseDown перетаскиваемого
// элемента для Internet Explorer и Opera
function contOnMouseDownlEOpera()
{
isDragging = true;
xd = window.event.offsetX;
yd = window.event.offsetY;
// Сохраняем изначальные координаты перетаскиваемого эл
xbegin = contObject.offsetLeft;
ybegin = contObject.offsetTop;
}
// Фумкцим-обрлботчик событии onMouHoDown подтаскиваемого
// элемента для Firefox
function contOnMouseDownFF(evt)
{
isDragging = true;
xd = evt.clientX - contObject.offsetLeft;
yd = evt.clientY - contObject.offsetTop;
// Сохраняем изначальные координаты перетаскиваемого элемента
xbegin = contObject.offsetLeft;
ybegin = contObject.offsetTop;
}
// Функция-обработчик события onMouseMove тела страницы
// для Internet Explorer и Opera
function bodyOnMouseMovelEOpera()
{
if (isDragging)
{
contObject.style.left = window.event.clientx - xd;
contObject.style.top = window.event.clientY - yd;
// Проверяем, попал ли перетаскиваемый элемент на один
// из элементов-"приемников", и, если так, меняем цвет
// его фона, сообщая тем самым посетителю,
// что элемент можно "бросить"
if ((isReceived(receiverlObject)) || (isReceived(receiver20bject)))
contObject.style.backgroundColor = "FF0000"
else
contObject.style.backgroundColor = "CCCCCC";
}
}
// Функция-обработчик события onMouseMove тела страницы
// для Firefox
function bodyOnMouseMoveFF(evt)
{
if (isDragging)
(
contObject.style.left = evt.clientX - xd;
contObject.style.top = evt.clientY - yd;
// Проверяем, попал ли перетаскиваемый элемент на один
// из элементов-"приемников", и, если так, меняем цвет
// его фона, сообщая тем самым посетителю,
// что элемент можно "бросить"
if ((isReceived(receiverlObject)) || (IsReceived(receiver2Object)))
contObject.style.backgroundColor = "#FF0000"
else
contObject.style.backgroundColor = "#CCCCCC";
}
}
// Функция-обработчик события onMouseUp перетаскиваемого элемента
function contOnMouseUp()
{
isDragging = false;
// Обязательно возвращаем перетаскиваемому элементу
// прежний цвет фона
contObject.style.backgroundColor = "#СССССС";
if (!((isReceived(receiverlObject)) || (isReceived{receiver10bject))))
contObject.style.left = xbegin;
contObject.style.top = ybegin;
}
}
</SCRIPT>
<STYLE>
#receiver1
{ position: absolute;
left: lOOpx;
top: ЗООрх;
width: 200px;
height: 200px;}
#receiver2
{ position: absolute;
left: 400px;
top: ЗООрх;
width: 200px;
height: 200px; }
#cont
{ position: absolute;
left: lOOpx;
top: lOOpx;
width: lOOpx;
height: lOOpx; }
</STYLE>
</HEAD>
<BODY>
<DIV ID=”receiverl”>TauaiTe его caoa!</DIV>
<DIV ID=”receiver2”>TamnTe его ccma'</DIV>
<DIV ID="cont”>TOT элемент страницы можно перетаскива
<SCRIPT TYPE='text/javascript">
var contObject » document.all ["cont"] ;
var receiverlObject = document.all ['receiverl];
var receiver2Object = document.all ["receiver2"];
var piObject = jspsGetProgramlnfo();
if ((piObject.programName == JSPS_GPI_MSIE) || (piObject.programName == JSPS_GPI_OPERA))
{
contObject.onmousedown = contOnMouseDownIEOpera;
document. body. onmousemove = bodyOnMouseMoveIEOpera;
}
else
{
contObject.addEventListener("mousedown", contOnMouseDownFF, false);
document.body.addEventListener("mousemove", bodyOnMouseMoveFF, false);
}
contObject.onmouseup = contOnMouseUp;
</SCRIPT>
</BODY>
</HTML>
