Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   передвижение объекта в окне браузера (https://javascript.ru/forum/misc/33670-peredvizhenie-obekta-v-okne-brauzera.html)

ОлегА 11.12.2012 16:36

Цитата:

Сообщение от skfyann
Чтобы разобраться в чем-то

согласен, но подключить jQuery это было лишь предложение, такое же как и посмотреть в учебнике!

Nicki-rurg 18.12.2012 21:20

А можешь свой пример скинуть,посмотреть)

ruslan_mart 19.12.2012 08:19

Вот мой рабочий вариант, проверял в опере и хроме. Думаю тебе придётся его доработать.

<div style="width:200px; height:500px; background:#000; position:fixed"><div onmousedown="Drag(this)" style="width:200px; height:50px; cursor:move; background:red"></div></div>

<script>
var DragZ = 100;

function Drag(a)
{
   var b = 1, c = a.parentNode.style, e = this, f = 1, g, h;
   DragZ++;
   c.zIndex = DragZ;
   a.onmousemove = function()
   {
      if(b)
      {
         if(f)
         {
            g = e.event.offsetX;
            h = e.event.offsetY;
            f = 0;
         }
         c.marginLeft = e.event.clientX-g;
         c.marginTop = e.event.clientY-h;
      }
   }
   window.onmouseup = function()
   {
      b = 0;
   }
}
</script>

Nicki-rurg 23.12.2012 17:15

Спасибо)все классно)но все таки хотелось бы понять почему мой вариант не работает)

JsLoveR 24.12.2012 17:30

Nicki-rurg, у вас в коде ошибка div.offsetleft, "Left" с маленькой буквы. Исправленный ваш код:
<div style="width:200px; height:200px; background:#345; position:absolute" onMouseDown="move(event, this)"></div>
<script language="javascript">
function move(e,div){
	document.onMouseDown = function(){return false}
	div.style.cursor = 'move';
	var x = e.pageX || e.clientX ;
	var y = e.pageY || e.clientY;
	var left = div.offsetLeft;
	var top = div.offsetTop;
	left = x - left;
	top = y - top;
	document.onmousemove = function(e){
		x = e.pageX || e.clientX;
		y = e.pageY || e.clientY;
		div.style.top = y - top+'px';
		div.style.left = x - left+'px';
	}
	document.onmouseup = function(){
		div.style.cursor = 'auto';
		document.onmousedown = function(){}
		document.onmousemove = function(){}
	}
}
</script>

bushstas 24.12.2012 19:48

если я не ошибаюсь например в Опере не работает event.pageX
там event.clientX

if(e.pageX){x=e.pageX;y=e.pageY}
else if(e.clientX){x=e.clientX;y=e.clientY}

JsLoveR 24.12.2012 20:51

bushstas, добавить var x = e.clientX || e.pageX. Добавил в код.


Часовой пояс GMT +3, время: 01:00.