обработчик onMouseMove
 

Помогите модифицировать функцию JavaScript!

В HTML документе есть тег div id = "middle_bg", в него вложен div id = "img".
Img содержит картинку, размеры которой больше middle_bg.
Функция mouseMove - обработчик на OnMouseMove, двигает img внутри middle_bg.
Каким образом можно модифицировать функцию, чтобы при достижении границы middle_bg тегом img, img дальше не двигался, т.е. чтобы не было свободного пространства и угол img не двигался дальше угла middle_bg?

function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev); //получаем координаты мыши
if(dragObject){
dragObject.style.position = 'relative';
var middle_bg=document.getElementById('middle_bg');
var middle_bg_coords = getPosition(middle_bg);
var img=document.getElementById('img');
var img_coords = getPosition(img);
dragObject.style.top = mousePos.y - mouseOffset.y - middle_bg_coords.y;
dragObject.style.left = mousePos.x - mouseOffset.x - middle_bg_coords.x;
return false;
}
}

Если строчку
dragObject.style.top = mousePos.y - mouseOffset.y - middle_bg_coords.y;
заменить например таким
if (map_coords.y <= middle_bg_coords.y)
{
dragObject.style.top = mousePos.y - mouseOffset.y - middle_bg_coords.y;
}
то если сначала двигать картинку вверх, а затем вниз, то она останавливается у верхнего края, однако дальнейшие попытки сдвинуть картинку вверх остаются безрезультатными, и картинка как бы прилипает к верхнему краю и вверх не передвигается

Помогите, пожалуйста, исправить код...

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

Проверяешь если y<0, ставишь её в 0. Т.е. нада возвращать её туда, где проверка будет давать false, чтобы можно было таскать.

ах, да... Забыл кое-что.
Алгоритм, значт, такой:
1. Присваиваем новое значение.
2. Проверяем, не вышла ли картинка за пределы
3. Если вышла - возвращаем назад.

if (map_coords.y <= middle_bg_coords.y)
{
dragObject.style.top = mousePos.y - mouseOffset.y - middle_bg_coords.y;
}
else
{
dragObject.style.top = 0;
}

При таком коде при движении мышью картинка дрожит, т.е. как бы пытается вернуться к верхнему краю...
Если отпускаю кнопку мыши, она иногда притягивается к верхнему краю, иногда нет ... от чего это зависит не пойму

if (map_coords.y <= middle_bg_coords.y)
{
dragObject.style.top = mousePos.y - mouseOffset.y - middle_bg_coords.y;
}
else
{
dragObject.style.top = 0;
dragObject = null;
}

при таком варианте (когда обнуляю dragObject) работает нормально, однако чтобы передвигать в другую сторону приходится заново цеплять мышкой...
не можете подсказать рациональное решение как от этого избавиться?

Ты не методом тыка делай, а умом.
Допустим ты двигаешь элемент по Y вверх. Тебе нада чтобы он не заходил выше нуля. Когда происходит событие, сначала присваиваешь новые значения. К примеру новое значение -10. После этого Делаешь проверку. В ней проверяешь - если твой объект находится там, где он НЕ должен быть, только тогда отправляешь его туда, где находится граница возможного расположения объекта, т.е. 0. Делать проверку вида y<=0 неправильно, т.к. 0 находится в области, в которой объект МОЖЕТ быть. Для понимания сего ты должет чётко представлять это в голове.

а каким образом отрабатывает обработчик события mousemove? при каждом перемещении мыши хотя бы на пиксель или после прекрашения движения?