Показать сообщение отдельно
  #2 (permalink)  
Старый 11.07.2015, 07:32
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Попробуйте такой вариант

/* спинная часть */
var W=window,
D=W.document,
elem_rect={
	left:function(elem){
		var b = D.body,
			e = D.documentElement, 
			x = W.pageXOffset || e.scrollLeft || b.scrollLeft,
			c = e.clientLeft || b.clientLeft || 0;
		return Math.round(elem.getBoundingClientRect().left+x-c);
	},
	top:function(elem){
		var b = D.body,
			e = D.documentElement, 
			y = W.pageYOffset || e.scrollTop || b.scrollTop,
			c = e.clientTop || b.clientTop || 0;
		return Math.round(elem.getBoundingClientRect().top+y-c);
	}
};

/* головная часть

@param h html element the handle of the 
@param div html element the draggable one

то есть за h мы будем таскать div, 

все имена и совпадения случайные :)

*/

var dragElem=function(h,div){
	var dx,dy,
	mouseUp = function (){
		W.removeEventListener('mousemove', divMove, true);
	},
	mouseDown=function (e){
		dx=e.clientX-elem_rect.left(div);
		dy=e.clientY-elem_rect.top(div);
		W.addEventListener('mousemove', divMove, true);
	},
	divMove=function(e){
		div.style.left = (e.clientX-dx) + 'px';
		div.style.top = (e.clientY-dy) + 'px';
	};
	h.addEventListener('mousedown', mouseDown, false);
	W.addEventListener('mouseup', mouseUp, false);
};

/* применение например */

dragElem(form.querySelector('h3'),form);


И таскаем форму за заголовок. Конечно нужна поддержкам стилями.
Ответить с цитированием