/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@
(не проверял)