Drag and drop
 

Здравствуйте Вопрос по Drag and drop

Подскажите мне надо чтобы была возможность двигать фото в блоке (div) вертикально но одно условие которое я не знаю как решить

Есть див с рамкой в нём фото когда я смещаю фото в верх

нижняя часть фото не должна подняться выше нижней рамки дива

и наоборот когда вниз

верхняя часть фото не должна опустится ниже верхней рамки дива

у меня есть простой код

в котором фото передвигается up down

<div id="sss"style="border:solid black; height:350px;
 width:350px;margin-left:50%;top:100;z-index: 20;">
 <img src='214115092012.png' style='position:absolute;left:50%;top:100;z-index: 21;' id='img'>
</div>

<script>
//elemX=0;// Глобальная координата x нажатия мыши относительно элемента
elemY=0;// Глобальная координата y нажатия мыши относительно элемента
drag=false;// Глобальная переменная, разрешающая или запрещающая перемещение элемента
function $$(id)
{
return document.getElementById(id);
}
$$('img').onmousedown = function(e){

			   e = e || window.event;
			  //elemX=e.clientX+document.body.scrollLeft-parseInt($$('img').style.left);
			  elemY=e.clientY+document.body.scrollTop-parseInt($$('img').style.top);
			  
			  drag=true;
                          }
$$('img').ondragstart = function() {return false;}
document.onmouseup = function() {drag=false;}
document.onmousemove = function(e) {
			e = e || window.event;
			//elx=parseInt(e.clientX)-elemX;
			ely=parseInt(e.clientY)-elemY;
			if(drag){
			//$$('img').style.left=e.clientX+document.body.scrollLeft-elemX;
			$$('img').style.top=e.clientY+document.body.scrollTop-elemY;
			}
			
			}
		
		
</script>

а если более кратко кто зарегистрирован на сайте google+

там есть возможность сменить обложку вот что мне нужно

буду благодарен за подсказки

Координаты elem.getBoundingClientRect() — относительно окна, а не документа

alex2012, сами с собой общаетесь? Ну ок, не буду мешать..