Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2012, 00:23
Аспирант
Отправить личное сообщение для alex2012 Посмотреть профиль Найти все сообщения от alex2012
 
Регистрация: 05.01.2012
Сообщений: 76

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+

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

буду благодарен за подсказки
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2013, 01:36
Аспирант
Отправить личное сообщение для alex2012 Посмотреть профиль Найти все сообщения от alex2012
 
Регистрация: 05.01.2012
Сообщений: 76

Координаты elem.getBoundingClientRect() — относительно окна, а не документа
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2013, 01:51
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
drag & drop , html 5 cyber Events/DOM/Window 1 30.06.2012 15:16
Помогите с drag and drop shtopor jQuery 1 20.02.2012 13:26
Разбираюсь с drag and drop uaNikita Events/DOM/Window 4 22.09.2011 11:25
Drag & Drop с несколькими элементами Katz Общие вопросы Javascript 1 29.07.2011 13:01
Drag & Drop в полном объеме dizews Events/DOM/Window 3 26.07.2007 12:43