Форум программистов [Powered by Invision Power Board]

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Drag & drop</title>
    <script type="text/javascript">
    // Переменная состояния, по умолчанию ничего не двигается = false
    var moveState = false;
    // Переменные координат мыши в начале перемещения, пока неизвестны
    var x0, y0;
    // Начальные координаты элемента, пока неизвестны
    var divX0, divY0;
    // Объявим функцию для определения координат мыши
    function defPosition(event) {
          var x = y = 0;
          if (document.attachEvent != null) { // Internet Explorer & Opera
                x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
                y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
          }
          if (!document.attachEvent && document.addEventListener) { // Gecko
                x = event.clientX + window.scrollX;
                y = event.clientY + window.scrollY;
          }
          return {x:x, y:y};
    }
    // Функция инициализации движения
    // Записываем всё параметры начального состояния
    function initMove(div, event) {
          var event = event || window.event;
          x0 = defPosition(event).x;
          y0 = defPosition(event).y;
          divX0 = parseInt(div.style.left);
          divY0 = parseInt(div.style.top);
          moveState = true;
    }
    
    // Если клавишу мыши отпустили вне элемента движение должно прекратиться
    document.onmouseup = function() {
          moveState = false;
    }
    // Функция обработки движения:
    function moveHandler(div, event) {
          var event = event || window.event;
          if (moveState) {
                div.style.left = (divX0 + defPosition(event).x - x0) + "px";
                div.style.top = (divY0 + defPosition(event).y - y0) + "px";
          }
    }
    </script>
    <style type="text/css">
    .abs {
        float:left;
        position:absolute;
        border:2px solid yellow;
    }
    </style>
</head>
<body>
<div class="abs" style="top:10px; left:10px;" onmousedown="initMove(this, event);" onmouseup="moveState = false;" onmousemove="moveHandler(this, event);">
    <img onDragStart="return false;" src="img/1.jpg" width="120" height="120" alt="" />

<div>
</body>
</html>