Форум

alex2012 · #1 (**permalink**) 19.04.2013, 05:58

Подскажите пожалуйта есть код

javascript (перемещает фото по вертикали up -down)

он работает как мне надо

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

			   e = e || window.event;
			  
			  elemY=e.clientY+document.body.scrollTop-parseInt($$('img2').style.top);
			 
			  drag=true;
                          }
$$('img2').ondragstart = function() {return false;}
document.onmouseup = function() {drag=false; document.getElementById("img2").style.cursor = 'default'; }
document.onmousemove = function(e) {
			e = e || window.event;
			
			ely=parseInt(e.clientY)-elemY;
			if(drag){
			document.getElementById("img2").style.cursor = 'move';
		
			$$('img2').style.top=e.clientY+document.body.scrollTop-elemY;
		
			var photo_height = document.getElementById("img2"); 
            heightImg = photo_height.height;
			
			var Newtop = e.clientY+document.body.scrollTop-elemY;
			var Newheight = heightImg;
			var parentHeight = 400;
			deltaBottom = parentHeight - (Newtop + Newheight);
			}
		
			
			}
	
</script>

Но начал прикручивать к странице
Перестаёт работать
из-за Элемента <!DOCTYPE>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Убираю всё опять работает
В Чем может быть проблема??

animhotep · #2 (**permalink**) 19.04.2013, 10:37

без доктайпа като тоже не алё

<style>#img2{
  background: red;
  height: 50px;
  width: 50px;
}</style>
<button onclick='alert("Ok")'>ok</button>
<div id="img2"></div>

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

			   e = e || window.event;
			  
			  elemY=e.clientY+document.body.scrollTop-parseInt($$('img2').style.top);
			 
			  drag=true;
                          }
$$('img2').ondragstart = function() {return false;}
document.onmouseup = function() {drag=false; document.getElementById("img2").style.cursor = 'default'; }
document.onmousemove = function(e) {
			e = e || window.event;
			
			ely=parseInt(e.clientY)-elemY;
			if(drag){
			document.getElementById("img2").style.cursor = 'move';
		
			$$('img2').style.top=e.clientY+document.body.scrollTop-elemY;
		
			var photo_height = document.getElementById("img2"); 
            heightImg = photo_height.height;
			
			var Newtop = e.clientY+document.body.scrollTop-elemY;
			var Newheight = heightImg;
			var parentHeight = 400;
			deltaBottom = parentHeight - (Newtop + Newheight);
			}
		
			
			}
	
</script>

alex2012 · #3 (**permalink**) 19.04.2013, 17:21

Работает

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>


</head>
<body>



 <img src='http://img15.kanobu.net/c/a5dac4b489ba89294da58d9988876d4d/220x313/games/42/120816e1b1474d8aad3ed0fa663c0e8f' style="position: absolute; left:0; top:1;  z-index:21; width:50px; "   id="img2"/>

 </body>
</html>


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

			   e = e || window.event;
			
			  elemY=e.clientY+document.body.scrollTop-parseInt($$('img2').style.top);
			 
			  drag=true;
                          }
$$('img2').ondragstart = function() {return false;}
document.onmouseup = function() {drag=false; document.getElementById("img2").style.cursor = 'default'; }
document.onmousemove = function(e) {
			e = e || window.event;
			
			ely=parseInt(e.clientY)-elemY;
			if(drag){
			document.getElementById("img2").style.cursor = 'move';//wait
		
			$$('img2').style.top=e.clientY+document.body.scrollTop-elemY;
		
			var photo_height = document.getElementById("img2"); 
            heightImg = photo_height.height;
			
			var Newtop = e.clientY+document.body.scrollTop-elemY;
			var Newheight = heightImg;
			var parentHeight = 300;
			deltaBottom = parentHeight - (Newtop + Newheight);
			}
			
	
			
			}
	</script>

Ниника · #4 (**permalink**) 19.04.2013, 18:22

единицу измерения (пиксели) указывать надо - и в инлайн-стиле для top, и в скрипте для того же cвойства top
подробности см. на софтайме

alex2012 · #5 (**permalink**) 19.04.2013, 18:43

Спасибо.

Форум

Справочник

Discord чат

Курсы javascript