Здравствуйте Вопрос по 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+
там есть возможность сменить обложку вот что мне нужно
буду благодарен за подсказки
