Итак, задача: написать скрипт, с помощью которого можно потаскать картинку по экрану.

Начнем с, так сказать, разбивки игрового поля:

<html>

<head>

<title> Таскаем картинки </title>

</head>

<body>

<div style="width: 100%; height: 100%;">

<div id=1 style="position:absolute; top: 100px; left: 100px; z-index: 0; width:200px; height:149px; background: url('pictures/image.jpg');" onMouseDown="startDrag(event,1)" onMouseUp="stopDrag()"> </div>

<div id=2 style="position:absolute; top: 100px; left :400px; z-index: 0; width:200px; height:149px; background: url('pictures/image2.jpg');" onMouseDown="startDrag(event,2)" onMouseUp="stopDrag()"> </div>

</div>

</body>

</html>


Итак, как видите, все предельно просто. На странице один слой, растянутый на весь экран, для того, чтобы можно было определять координаты курсора, где бы он не находился. Иначе это сделать не получится.В нем два слоя, которые, по сути, и являются картинками, которые мы будем таскать. Разберем один из них получше:
  • position: absolute — слой может свободно перемещатся
  • top: 100px; left: 100px — начальные координаты слоя
  • z-index: 0 — слой всегда ниже следующего
  • width:200px; height:149px — размеры слоя (подогнаны к картинке)
  • background: url('pictures/image.jpg') — собственно, сама картинка, которую мы будем таскать. мы ставим ее фоном слоя из-за особенностей браузера ИЕ
  • onMouseDown=«startDrag(event,1)» onMouseUp=«stopDrag()» — события, которые мы опишем в будущем скрипте


Ну, надеюсь, с этим проблем не должно быть. Элементарный HTML с примесью CSS.

Идем дальше. Перейдем непосредственно к скрипту.

Первая функция — функция, которая будет реагировать на опускание кнопки мыши на слое.

function startDrag(e, layerName)
{
lay=document.getElementById(layerName); //ищем слой, на котором произошло событие

//следующая часть отвечает за то, чтобы слой при щелчке мышью перемещался наверх. для этого ему ставится максимальный z-index, а остальным z-index раздается в порядке убывания
var layers = document.getElementsByTagName(«div»);
var layerLength = (layers.length — 1);
var layerZindex = lay.style.zIndex;

for(var i=1; i < (layerLength + 1); i++) {

if (parseInt(layers[i].style.zIndex) == 0) { continue; }
if (parseInt(layers[i].style.zIndex) >= parseInt(layerZindex)) { layers [i].style.zIndex = parseInt(layers[i].style.zIndex) — 1; }

}

lay.style.zIndex = layerLength — 1;

//это танцы с бубном для нормального получения координат щелчка мышью в браузере файрфокс
if (!e) e = window.event;

var x=e.clientX;

var y=e.clientY;

//действия, помогающие найти отношение координат слоя к координатам курсора
differenceLeft = parseInt(x) — parseInt(lay.style.left);

differenceTop = parseInt(y) — parseInt(lay.style.top);

//«рычаг» вкл
dragIsStarted = true;

}


Ну вот, примерно так. Дальше — функция, которая будет ловить движение мыши, и делать необходимые действия:

function updateCoords(e)
{
//если «рычаг» вкл, то слой должен двигаться за курсором
if (dragIsStarted)

{

//опять танцы с бубном для нормального получения координат щелчка мышью в браузере файрфокс

if (!e) e = window.event;

var x=e.clientX;
var y=e.clientY;

//действия, которые изменяют координаты слоя, зная их отношение к координатам курсора
lay.style.top = parseInt(y) — parseInt(differenceTop);
lay.style.left = parseInt(x) — parseInt(differenceLeft);

}

}


Ну и наконец последняя функция — функция, реагирующая на отпускание кнопки мыши, и останавливающяя перемещение слоя.Наверное, самая сложная функция:

function stopDrag()
{
//«рычаг» выкл.
dragIsStarted = false;

}


Ну вот. Задача выполнена.На первый взгляд, код очень простой и примитивный. Но дойти до него довольно непросто. Особенно из-за ужасной несовместимости браузеров. Особенность скрипта позволяет добавлять на страницу произвольное количество подобных слоев и они все будут таскаемы.