Показать сообщение отдельно
  #1 (permalink)  
Старый 18.09.2012, 23:50
Аватар для shkoder
Аспирант
Отправить личное сообщение для shkoder Посмотреть профиль Найти все сообщения от shkoder
 
Регистрация: 06.07.2012
Сообщений: 31

Drag - как-то вот так решил
/js/drag.js
var dragable = function(node){
	var _this = this,
		_onmousemove = window.onmousemove,
		_onblur = window.onblur,
		_onmouseup = window.onmouseup;
	if (typeof node === 'object' && node.onmousedown) {
		node.onmousedown = function(e){
			var e = e || window.event;
			var target = e.target || e.srcElement;
			target.parentNode.style.position = 'absolute';
			var elementTop = target.parentNode.offsetTop,
				elementLeft = target.parentNode.offsetLeft;
			target.parentNode.style.top = elementTop + 'px';
			target.parentNode.style.left = elementLeft + 'px';
			var drag = true;
			_this.addClass(target.parentNode, 'dragable');
			window.onblur = window.onmouseup = function(){
				drag = false;
				_this.removeClass(target.parentNode, 'dragable');
				window.onmousemove = _onmousemove;
				window.onblur = _onblur;
				window.onmouseup = _onmouseup;
			};
			window.onmousemove = function(_e){
				if (drag){
					var _e = _e || window.event;
					target.parentNode.style.top = _e.clientY - e.clientY + elementTop + 'px';
					target.parentNode.style.left = _e.clientX - e.clientX + elementLeft + 'px';
				}
			}
		}
	}
}
dragable.prototype = {
	addClass : function(node, name){
		if (typeof node === 'object' && typeof node.setAttribute === 'function' && name){
			var stack = node.getAttribute('class') ? node.getAttribute('class').split(' ') : [];
			for (var i in stack)
				if (stack[i] === name)
					return true;
			stack.push(name);
			node.setAttribute('class', stack.join(' '));
			return true;
		}
		return false;
	},
	removeClass : function(node, name){
		if (typeof node === 'object' && typeof node.setAttribute === 'function' && name){
			var stack = node.getAttribute('class') ? node.getAttribute('class').split(' ') : [];
			for (var i in stack)
				if (stack[i] === name)
					delete stack[i];
			node.setAttribute('class', stack.join(' '));
			return true;
		}
		return false;		
	}
};

window.onload = function(){
	new dragable(document.getElementById('drag'));
}

html
<!DOCTYPE html>
<html>
	<head>
		<title>Drag</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="/js/drag.js"></script>
		<style>
			html, body { height: 100%; margin: 0; padding: 0; }
			#drag { padding: 30px 0; width: 300px; text-align: center; display: block; border: 1px solid #CCCCCC; background: #EEEEEE; }
		</style>
	</head>
	<body>
		<div>
			<div id="drag">Возьми и перетащи меня!!!</div>
		</div>
	</body>
</html>


Покритикуйте

Ps: теперь с учетом замечаний Dim@
(не проверял)

Последний раз редактировалось shkoder, 19.09.2012 в 07:41.
Ответить с цитированием