Передвижение объекта
 

Всем доброго времени, уважаемые знатоки!
Пожалуйста помогите разобраться.

Никак не могу понять как такое сделать:

есть

<div class="field" style="width:500px;height:500px;position:relative;">
	<img src="img.png" at="img">
</div>

Как сделать, чтобы передвигать можно было только внутри этого контейнера field?

Чтобы не выходило за пределы.

var img=$('.field img');
img.mousedown(function() {
	$('.field').mousemove(function(e) {
		img.css({
			'position':'absolute',
			'top':e.pageY-15,
			'left':e.pageX-15
		});
	});
});

Никак не получается, пожалуйста помогите это сделать.
Что я упускаю?(
Исправьте пожалуйста...

Уже какой день не могу никак решить эту задачу.

Не вижу сложности.

...
if( 
  e.pageY > minY && 
  e.pageY < maxY && 
  e.pageX > minX && 
  e.pageX < maxX
){
        img.css({
            'position':'absolute',
            'top':e.pageY-15,
            'left':e.pageX-15
        });
}
...

mix и max значения берутся естесно от размеров нужного блока кратинки.

Не работает он не верно перемещается и показывает координаты.
Нужно, чтобы только внутри квадрата, а он получается, что при клике улетает за него.

И вообще координаты не верные почему - то.

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

Сделал с offsetX и offsetY теперь вообще она не сдвигается.
И дребежит(

раз уж вы используете jQuery

воспользуетесь и jQurey ui

пример из "Ограничения перемещений", это конечно не хардкор, но быстрое решение вашей проблемы

Dmitriyff, это не решит задачу.

Вообщем написал так:

$(document).ready(function() {
	$('.field img').each(function() {
		drag(this);
	});
});

var startX,
	startY,
	offsetX,
	offsetY,
	zindex,
	element;

function intval(intval) {
	intval=parseInt(intval);
	return intval==null || isNaN(n)?0:intval;
}

function drag(obj) {
        obj=$(obj);
	var field=$('.field'),
		target;
	obj.mousedown(function(e) {
		field.unbind('mouseup');
		target=e.target != null?e.target:e.srcElement;
		startX=e.clientX;
		startY=e.clientY;
		offsetX=intval(target.style.left);
		offsetY=intval(target.style.top);
		zindex=target.style.zIndex;
		target.style.zIndex=1000;
		element=target;
		field.mousemove(function(e) {
			element.style.left=(offsetX+e.clientX-startX)+'px';
			element.style.top=(offsetY+e.clientY-startY)+'px';
			obj.mouseup(function() {
				field.unbind('mousemove');
			});
		});
	}
}

Теперь он двигается нормально.
Но возникла проблема, при отдалении или сколле, элемент уходит от мышки( как это решить? Прошу помогите...

Исправьте пожалуйста, что не так.