Можно ли при помощи JavaScript слой DIV выровнять по центру браузера?

@Demon008 · Регистрация: 31.03.2009

Author24 — интернет-сервис помощи студентам

Добрый день, у меня есть один вопрос. Можно ли при помощи JavaScript слой DIV выровнять по центру браузера? Слышал что можно, но инфы не нашел(( Если можно,
то киньте ссылку где мона посмореть...

@БурундукЪ · 31.03.2009, 13:21

Буксировка (перетаскивание) DIV на JavaScript
Когда у меня возникла необходимость в перетаскивании картинки по html странице я не мог найти готового, а главное универсального решения для реализации этой задачи. Поэтому посидев немного за аналоговыми источниками информации у меня получилось реализовать следующий скрипт, который надеюсь пригодится и вам.

Главная проблема при реализации этого скрипта была в том, что при перетаскивании DIV содержащего картинку перестает инициироваться событие onMouseMove из-за обработчика события поумолчанию, справиться с этой проблемой мне помогли методы класса Event: event.stopPropagation() и event.preventDefault(). Первый метод запрещает распространение события дальше по дереву тэгов, а второй отменяет обработчик события поумолчанию, но это будет работать в браузерах поддерживающих DOM, для остальных же аналогом этих методов будет: event.cancelBubble = true и event.returnValue = false. Итак, в итоге имеем, что при написании обработчика события onMouseMove и onMouseDown для перетаскиваемого объекта в него надо вставить следующий код:

Javascript

if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;

Следующей загвоздкой стало получение объекта Event. Если в IE к нему можно обратиться просто window.event, то в Netscape он передается в качестве параметра функции обработчика события, решение проблемы выглядит следующим образом:

HTML5

<script type="text/javascript">
function method(e){
  if(!e) e = window.event;
  ...
}
</script>
<div onMouseMove="method(event)"></div>

Дальше все дело техники. Обрабатывем событие onMouseDown где ставим признак, что перетаскивание началось и вычисляем смещение левого верхнего угла DIV относительно позиции мыши. Обрабатывем событие onMouseUp, где снимаем признак перетаскивания. В обработчике onMouseMove проверяем наличие этого признака и мы готовы к перетаскиванию. В этом нам поможет CSS: аттрибут position должен принимать значение absolute, а также задаем координаты левого верхнего угла DIV используя аттрибуты top и left.

HTML5

<script type="text/javascript">
var flag=false;
var shift_x;
var shift_y;
 
function start_drag(itemToMove,e){
if(!e) e = window.event;
flag=true;
shift_x = e.clientX-parseInt(itemToMove.style.left);
shift_y = e.clientY-parseInt(itemToMove.style.top);
 
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
 
function end_drag(){ flag=false; }
 
function dragIt(itemToMove,e){
if(!flag) return;
if(!e) e = window.event;
itemToMove.style.left = (e.clientX-shift_x) + "px";
itemToMove.style.top = (e.clientY-shift_y) + "px";
 
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
</script>
 
<div style="position:absolute; left:5px; top:5px;" onMouseDown="start_drag(this,event)"
 onMouseUp="end_drag()" onMouseMove="dragIt(this,event)">
<img src="image.png">
</div>

Взято с http://articles.pgood.ru/
самому погуглить слабо было?

@Demon008 · 31.03.2009, 13:26 **[ТС]**

Огромно пасибо, попробую))

@Demon008 6 / 6 / 1 Регистрация: 31.03.2009 Сообщений: 54
		1
	Можно ли при помощи JavaScript слой DIV выровнять по центру браузера? 31.03.2009, 13:15. Показов 4041. Ответов 2 Метки нет (Все метки) Добрый день, у меня есть один вопрос. Можно ли при помощи JavaScript слой DIV выровнять по центру браузера? Слышал что можно, но инфы не нашел(( Если можно, то киньте ссылку где мона посмореть... 0

@Demon008 6 / 6 / 1 Регистрация: 31.03.2009 Сообщений: 54
	31.03.2009, 13:26 [ТС]	3
	Огромно пасибо, попробую)) 0

Можно ли при помощи JavaScript слой DIV выровнять по центру браузера?

Решение