Вот код :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<script language="javascript">
function defPosition(event) {
var x = y = 0;
if (document.attachEvent != null) { // Internet Explorer & Opera
x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
} else if (!document.attachEvent && document.addEventListener) { // Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
} else {
// Do nothing
}
return {x:x, y:y};
}
var move=false;
var over=false;
var deltaX = 0;
var deltaY = 0;
var x = 0;
var y = 0;
var dnd
var divid
function okget(divid) {
dnd = divid
document.getElementById(dnd).onmouseover= function () {
over=true;
}
document.getElementById(dnd).onmouseout = function () {
over=false;
}
document.getElementById(dnd).onmousedown = function (event) {
if (over) {
move = true;
deltaX = x - document.getElementById(dnd).offsetLeft;
deltaY = y - document.getElementById(dnd).offsetTop;
}
}
document.onmouseup = function () {
move=false;
}
var event
document.onmousemove = function(event) {
event = event || window.event;
x= defPosition(event).x;
y= defPosition(event).y;
if (move) {
x =x - deltaX;
y =y - deltaY;
document.getElementById(dnd).style.left= x + "px";
document.getElementById(dnd).style.top= y + "px";
}
}
}
</script>
</head>
<body>
<div id="drag_n_drop" onMouseDown="okget(this.id)" style="background-color:#f6f1f4;border-top: 16px solid #CCCFFF;position:absolute;left:300px;top:300px; width:196px; height:276px"> </div>
</body>
</html>
Тут слой должен после нажатия по нему ЛКМ перемещаться за мышкой, но увы, он начинает двигаться только после того, как ЛКМ будет нажата на слое, а отпущена вне слоя, и дальше уже можно двигать. Как можно поправить?